next-recomponents 1.6.94 → 1.6.95

package/dist/index.d.mts

@@ -166,4 +166,11 @@ declare function useExcel(): {
     importAllPages: (file: File) => Promise<Record<string, any[]>>;
 };
 
-export { Alert, Button, Container, Form, Input, Modal, Pre, Select, Table, TextArea, regularExpresions, useDates, useExcel, useResources };
+interface CalendarProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    enabledDates: Date[];
+    onChange?: any;
+    value?: any;
+}
+declare function MyCalendar({ enabledDates, onChange, defaultValue, className, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
+
+export { Alert, Button, Container, Form, Input, Modal, MyCalendar, Pre, Select, Table, TextArea, regularExpresions, useDates, useExcel, useResources };

package/dist/index.d.ts

@@ -166,4 +166,11 @@ declare function useExcel(): {
     importAllPages: (file: File) => Promise<Record<string, any[]>>;
 };
 
-export { Alert, Button, Container, Form, Input, Modal, Pre, Select, Table, TextArea, regularExpresions, useDates, useExcel, useResources };
+interface CalendarProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    enabledDates: Date[];
+    onChange?: any;
+    value?: any;
+}
+declare function MyCalendar({ enabledDates, onChange, defaultValue, className, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
+
+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,
@@ -44428,6 +44429,117 @@ function useExcel() {
     importAllPages: importFileAllPages
   };
 }
+
+// src/calendar/index.tsx
+var import_react31 = require("react");
+var import_react_datepicker = __toESM(require("react-datepicker"));
+var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
+
+// src/calendar/calendar.icon.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function CalendarIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.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_runtime23 = require("react/jsx-runtime");
+function MyCalendar(_a) {
+  var _b = _a, {
+    enabledDates,
+    onChange,
+    defaultValue = "",
+    className = ""
+  } = _b, otherProps = __objRest(_b, [
+    "enabledDates",
+    "onChange",
+    "defaultValue",
+    "className"
+  ]);
+  const modalRef = (0, import_react31.useRef)(null);
+  const [selectedDate, setSelectedDate] = (0, import_react31.useState)(null);
+  const [dateStr, setDateStr] = (0, import_react31.useState)(
+    defaultValue
+  );
+  const [visible, setVisible] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
+    setVisible(typeof window !== "undefined");
+  }, []);
+  function handleChange(date) {
+    var _a2, _b2;
+    if (!date) return;
+    setSelectedDate(date);
+    const formattedDate = date.toISOString().split("T")[0];
+    setDateStr(formattedDate);
+    onChange == null ? void 0 : onChange({ target: { value: formattedDate } });
+    (_b2 = (_a2 = modalRef.current) == null ? void 0 : _a2.close) == null ? void 0 : _b2.call(_a2);
+  }
+  if (!(enabledDates == null ? void 0 : enabledDates.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        onClick: () => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
+        },
+        className: "cursor-pointer flex items-center justify-center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "input",
+            __spreadProps(__spreadValues({}, otherProps), {
+              className: [
+                "p-2 w-full rounded border shadow cursor-pointer",
+                className
+              ].join(" "),
+              value: dateStr,
+              onChange: () => {
+              },
+              readOnly: true
+            })
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, {}) })
+        ]
+      }
+    ),
+    visible && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "dialog",
+      {
+        ref: modalRef,
+        id: "my-calendar-modal-item",
+        onClick: (e) => {
+          var _a2;
+          const el = e.target;
+          if ((el == null ? void 0 : el.id) === "my-calendar-modal-item") {
+            (_a2 = modalRef.current) == null ? void 0 : _a2.close();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react_datepicker.default,
+          {
+            inline: true,
+            selected: selectedDate,
+            onChange: handleChange,
+            includeDates: enabledDates
+          }
+        )
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -44436,6 +44548,7 @@ function useExcel() {
   Form,
   Input,
   Modal,
+  MyCalendar,
   Pre,
   Select,
   Table,

package/dist/index.mjs

@@ -44419,6 +44419,121 @@ function useExcel() {
     importAllPages: importFileAllPages
   };
 }
+
+// src/calendar/index.tsx
+import {
+  useEffect as useEffect9,
+  useRef as useRef7,
+  useState as useState10
+} from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+// src/calendar/calendar.icon.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function CalendarIcon() {
+  return /* @__PURE__ */ jsx21(
+    "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__ */ jsx21("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 jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function MyCalendar(_a) {
+  var _b = _a, {
+    enabledDates,
+    onChange,
+    defaultValue = "",
+    className = ""
+  } = _b, otherProps = __objRest(_b, [
+    "enabledDates",
+    "onChange",
+    "defaultValue",
+    "className"
+  ]);
+  const modalRef = useRef7(null);
+  const [selectedDate, setSelectedDate] = useState10(null);
+  const [dateStr, setDateStr] = useState10(
+    defaultValue
+  );
+  const [visible, setVisible] = useState10(false);
+  useEffect9(() => {
+    setVisible(typeof window !== "undefined");
+  }, []);
+  function handleChange(date) {
+    var _a2, _b2;
+    if (!date) return;
+    setSelectedDate(date);
+    const formattedDate = date.toISOString().split("T")[0];
+    setDateStr(formattedDate);
+    onChange == null ? void 0 : onChange({ target: { value: formattedDate } });
+    (_b2 = (_a2 = modalRef.current) == null ? void 0 : _a2.close) == null ? void 0 : _b2.call(_a2);
+  }
+  if (!(enabledDates == null ? void 0 : enabledDates.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        onClick: () => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a2.showModal) == null ? void 0 : _b2.call(_a2);
+        },
+        className: "cursor-pointer flex items-center justify-center",
+        children: [
+          /* @__PURE__ */ jsx22(
+            "input",
+            __spreadProps(__spreadValues({}, otherProps), {
+              className: [
+                "p-2 w-full rounded border shadow cursor-pointer",
+                className
+              ].join(" "),
+              value: dateStr,
+              onChange: () => {
+              },
+              readOnly: true
+            })
+          ),
+          /* @__PURE__ */ jsx22("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx22(CalendarIcon, {}) })
+        ]
+      }
+    ),
+    visible && /* @__PURE__ */ jsx22(
+      "dialog",
+      {
+        ref: modalRef,
+        id: "my-calendar-modal-item",
+        onClick: (e) => {
+          var _a2;
+          const el = e.target;
+          if ((el == null ? void 0 : el.id) === "my-calendar-modal-item") {
+            (_a2 = modalRef.current) == null ? void 0 : _a2.close();
+          }
+        },
+        children: /* @__PURE__ */ jsx22(
+          DatePicker,
+          {
+            inline: true,
+            selected: selectedDate,
+            onChange: handleChange,
+            includeDates: enabledDates
+          }
+        )
+      }
+    )
+  ] });
+}
 export {
   Alert,
   Button,
@@ -44426,6 +44541,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.94",
+  "version": "1.6.95",
   "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-datepicker": "^8.4.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,96 @@
+"use client";
+import {
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import CalendarIcon from "./calendar.icon";
+
+interface CalendarProps
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  enabledDates: Date[];
+  onChange?: any;
+  value?: any;
+}
+
+export default function MyCalendar({
+  enabledDates,
+  onChange,
+  defaultValue = "",
+  className = "",
+  ...otherProps
+}: CalendarProps) {
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+  const [dateStr, setDateStr] = useState<string | number | readonly string[]>(
+    defaultValue
+  );
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setVisible(typeof window !== "undefined");
+  }, []);
+
+  function handleChange(date: Date | null) {
+    if (!date) return;
+    setSelectedDate(date);
+    const formattedDate = date.toISOString().split("T")[0];
+    setDateStr(formattedDate);
+    onChange?.({ target: { value: formattedDate } });
+    modalRef.current?.close?.();
+  }
+
+  if (!enabledDates?.length) {
+    return null;
+  }
+
+  return (
+    <div className="relative">
+      <div
+        onClick={() => modalRef?.current?.showModal?.()}
+        className="cursor-pointer flex items-center justify-center"
+      >
+        <input
+          {...otherProps}
+          className={[
+            "p-2 w-full rounded border shadow cursor-pointer",
+            className,
+          ].join(" ")}
+          value={dateStr}
+          onChange={() => {}}
+          readOnly
+        />
+        <div className="absolute" style={{ right: "10px" }}>
+          <CalendarIcon />
+        </div>
+      </div>
+
+      {visible && (
+        <dialog
+          ref={modalRef}
+          id="my-calendar-modal-item"
+          onClick={(e) => {
+            const el = e.target as HTMLElement;
+            if (el?.id === "my-calendar-modal-item") {
+              modalRef.current?.close();
+            }
+          }}
+        >
+          <DatePicker
+            inline
+            selected={selectedDate}
+            onChange={handleChange}
+            includeDates={enabledDates}
+          />
+        </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";