@saurabhroys/nepali-datepicker 1.0.1

package/README.md

@@ -0,0 +1,19 @@
+# @saurabhroys/nepali-datepicker 🇳🇵
+
+A modern, lightweight, and TypeScript-ready Nepali Date Picker component for React applications. Built with Tailwind CSS.
+
+![NPM Version](https://img.shields.io/npm/v/@saurabhroys/nepali-datepicker)
+![License](https://img.shields.io/npm/l/@saurabhroys/nepali-datepicker)
+
+## Features
+- 📅 **Bikram Sambat (BS)** Support
+- 🎨 **Tailwind CSS** Styling (Fully Customizable)
+- 🔒 **TypeScript** Support (IntelliSense)
+- 🔢 **Nepali Digits** (१, २, ३) Display
+
+## Installation
+
+```bash
+npm install @saurabhroys/nepali-datepicker
+# or
+yarn add @saurabhroys/nepali-datepicker

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const NepaliDatePicker: () => react_jsx_runtime.JSX.Element;
+
+export { NepaliDatePicker };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const NepaliDatePicker: () => react_jsx_runtime.JSX.Element;
+
+export { NepaliDatePicker };

package/dist/index.js

@@ -0,0 +1,148 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  NepaliDatePicker: () => NepaliDatePicker_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/NepaliDatePicker.tsx
+var import_react = require("react");
+var import_nepali_date_converter = __toESM(require("nepali-date-converter"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var NEPALI_MONTHS = [
+  "Baisakh",
+  "Jestha",
+  "Ashad",
+  "Shrawan",
+  "Bhadra",
+  "Ashwin",
+  "Kartik",
+  "Mangsir",
+  "Poush",
+  "Magh",
+  "Falgun",
+  "Chaitra"
+];
+var WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var toNepaliDigits = (num) => {
+  const map = {
+    0: "\u0966",
+    1: "\u0967",
+    2: "\u0968",
+    3: "\u0969",
+    4: "\u096A",
+    5: "\u096B",
+    6: "\u096C",
+    7: "\u096D",
+    8: "\u096E",
+    9: "\u096F"
+  };
+  return num.toString().split("").map((d) => map[d] || d).join("");
+};
+var NepaliDatePicker = () => {
+  const [currentBS, setCurrentBS] = (0, import_react.useState)(new import_nepali_date_converter.default());
+  const [selectedDate, setSelectedDate] = (0, import_react.useState)(null);
+  const [daysInMonth, setDaysInMonth] = (0, import_react.useState)([]);
+  const [startDayIndex, setStartDayIndex] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const year = currentBS.getYear();
+    const month = currentBS.getMonth();
+    const firstDayOfMonth = new import_nepali_date_converter.default(year, month, 1);
+    const startDay = firstDayOfMonth.getDay();
+    setStartDayIndex(startDay);
+    let daysCount = 0;
+    for (let i = 29; i <= 32; i++) {
+      try {
+        const temp = new import_nepali_date_converter.default(year, month, i);
+        if (temp.getMonth() === month) {
+          daysCount = i;
+        } else {
+          break;
+        }
+      } catch (e) {
+        break;
+      }
+    }
+    setDaysInMonth(Array.from({ length: daysCount }, (_, i) => i + 1));
+  }, [currentBS]);
+  const prevMonth = () => {
+    const prev = new import_nepali_date_converter.default(currentBS.getYear(), currentBS.getMonth() - 1, 1);
+    setCurrentBS(prev);
+  };
+  const nextMonth = () => {
+    const next = new import_nepali_date_converter.default(currentBS.getYear(), currentBS.getMonth() + 1, 1);
+    setCurrentBS(next);
+  };
+  const onDateClick = (day) => {
+    const selected = new import_nepali_date_converter.default(currentBS.getYear(), currentBS.getMonth(), day);
+    setSelectedDate(selected);
+    console.log("User Selected (BS):", selected.format("YYYY-MM-DD"));
+    console.log("User Selected (AD):", new Date(selected.toJsDate()).toDateString());
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-80 mx-auto bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden font-sans", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between items-center bg-blue-600 p-4 text-white", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: prevMonth, className: "hover:bg-blue-700 p-1 rounded", children: "<" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "font-bold text-lg", children: [
+        NEPALI_MONTHS[currentBS.getMonth()],
+        " ",
+        toNepaliDigits(currentBS.getYear())
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: nextMonth, className: "hover:bg-blue-700 p-1 rounded", children: ">" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-7 text-center bg-gray-50 border-b border-gray-100", children: WEEK_DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs font-semibold text-gray-500 py-2", children: day }, day)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-7 p-2 gap-1", children: [
+      Array.from({ length: startDayIndex }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8" }, `empty-${i}`)),
+      daysInMonth.map((day) => {
+        const isSelected = selectedDate && selectedDate.getDate() === day && selectedDate.getMonth() === currentBS.getMonth() && selectedDate.getYear() === currentBS.getYear();
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: () => onDateClick(day),
+            className: `h-8 w-8 flex items-center justify-center rounded-full text-sm transition-colors
+                ${isSelected ? "bg-blue-600 text-white font-bold shadow-md" : "hover:bg-blue-100 text-gray-700 hover:text-blue-600"}`,
+            children: toNepaliDigits(day)
+          },
+          day
+        );
+      })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 border-t text-center text-xs text-gray-500 bg-gray-50", children: [
+      "Selected: ",
+      selectedDate ? `${toNepaliDigits(selectedDate.getDate())} ${NEPALI_MONTHS[selectedDate.getMonth()]} (BS)` : "None"
+    ] })
+  ] });
+};
+var NepaliDatePicker_default = NepaliDatePicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NepaliDatePicker
+});

package/dist/index.mjs

@@ -0,0 +1,111 @@
+// src/NepaliDatePicker.tsx
+import { useState, useEffect } from "react";
+import NepaliDate from "nepali-date-converter";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NEPALI_MONTHS = [
+  "Baisakh",
+  "Jestha",
+  "Ashad",
+  "Shrawan",
+  "Bhadra",
+  "Ashwin",
+  "Kartik",
+  "Mangsir",
+  "Poush",
+  "Magh",
+  "Falgun",
+  "Chaitra"
+];
+var WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var toNepaliDigits = (num) => {
+  const map = {
+    0: "\u0966",
+    1: "\u0967",
+    2: "\u0968",
+    3: "\u0969",
+    4: "\u096A",
+    5: "\u096B",
+    6: "\u096C",
+    7: "\u096D",
+    8: "\u096E",
+    9: "\u096F"
+  };
+  return num.toString().split("").map((d) => map[d] || d).join("");
+};
+var NepaliDatePicker = () => {
+  const [currentBS, setCurrentBS] = useState(new NepaliDate());
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [daysInMonth, setDaysInMonth] = useState([]);
+  const [startDayIndex, setStartDayIndex] = useState(0);
+  useEffect(() => {
+    const year = currentBS.getYear();
+    const month = currentBS.getMonth();
+    const firstDayOfMonth = new NepaliDate(year, month, 1);
+    const startDay = firstDayOfMonth.getDay();
+    setStartDayIndex(startDay);
+    let daysCount = 0;
+    for (let i = 29; i <= 32; i++) {
+      try {
+        const temp = new NepaliDate(year, month, i);
+        if (temp.getMonth() === month) {
+          daysCount = i;
+        } else {
+          break;
+        }
+      } catch (e) {
+        break;
+      }
+    }
+    setDaysInMonth(Array.from({ length: daysCount }, (_, i) => i + 1));
+  }, [currentBS]);
+  const prevMonth = () => {
+    const prev = new NepaliDate(currentBS.getYear(), currentBS.getMonth() - 1, 1);
+    setCurrentBS(prev);
+  };
+  const nextMonth = () => {
+    const next = new NepaliDate(currentBS.getYear(), currentBS.getMonth() + 1, 1);
+    setCurrentBS(next);
+  };
+  const onDateClick = (day) => {
+    const selected = new NepaliDate(currentBS.getYear(), currentBS.getMonth(), day);
+    setSelectedDate(selected);
+    console.log("User Selected (BS):", selected.format("YYYY-MM-DD"));
+    console.log("User Selected (AD):", new Date(selected.toJsDate()).toDateString());
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-80 mx-auto bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden font-sans", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-blue-600 p-4 text-white", children: [
+      /* @__PURE__ */ jsx("button", { onClick: prevMonth, className: "hover:bg-blue-700 p-1 rounded", children: "<" }),
+      /* @__PURE__ */ jsxs("div", { className: "font-bold text-lg", children: [
+        NEPALI_MONTHS[currentBS.getMonth()],
+        " ",
+        toNepaliDigits(currentBS.getYear())
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: nextMonth, className: "hover:bg-blue-700 p-1 rounded", children: ">" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 text-center bg-gray-50 border-b border-gray-100", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-gray-500 py-2", children: day }, day)) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 p-2 gap-1", children: [
+      Array.from({ length: startDayIndex }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-8" }, `empty-${i}`)),
+      daysInMonth.map((day) => {
+        const isSelected = selectedDate && selectedDate.getDate() === day && selectedDate.getMonth() === currentBS.getMonth() && selectedDate.getYear() === currentBS.getYear();
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onDateClick(day),
+            className: `h-8 w-8 flex items-center justify-center rounded-full text-sm transition-colors
+                ${isSelected ? "bg-blue-600 text-white font-bold shadow-md" : "hover:bg-blue-100 text-gray-700 hover:text-blue-600"}`,
+            children: toNepaliDigits(day)
+          },
+          day
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3 border-t text-center text-xs text-gray-500 bg-gray-50", children: [
+      "Selected: ",
+      selectedDate ? `${toNepaliDigits(selectedDate.getDate())} ${NEPALI_MONTHS[selectedDate.getMonth()]} (BS)` : "None"
+    ] })
+  ] });
+};
+var NepaliDatePicker_default = NepaliDatePicker;
+export {
+  NepaliDatePicker_default as NepaliDatePicker
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@saurabhroys/nepali-datepicker",
+  "version": "1.0.1",
+  "description": "A modern, Tailwind-based Nepali Date Picker for React",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "nepal",
+    "date-picker",
+    "react",
+    "bikram-sambat"
+  ],
+  "author": "Saurabh Roy",
+  "license": "ISC",
+  "type": "commonjs",
+  "peerDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "dependencies": {
+    "nepali-date-converter": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}