@nepdatejs/react 0.0.0-bootstrap → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shishir Rai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,75 @@
 # @nepdatejs/react
 
-This placeholder version only reserves the name. Install the latest version.
+The BS/AD date picker and calendar for React 18 and 19. It provides styled components, plus headless hooks for your own markup, and works with server rendering and React Server Components.
+
+```bash
+npm install @nepdatejs/react @nepdatejs/styles
+```
+
+```tsx
+import '@nepdatejs/styles';
+import { useState } from 'react';
+import { DatePicker } from '@nepdatejs/react';
+
+export function Form() {
+  const [dob, setDob] = useState('');
+
+  return (
+    <label>
+      Date of birth
+      <DatePicker value={dob} onChange={setDob} max="2026-12-31" />
+    </label>
+  );
+}
+```
+
+`value` and `onChange` use the AD date as `"YYYY-MM-DD"`, the same as `<input type="date">`. Viewers see and type BS (or AD, after switching).
+
+## Components
+
+| Component                                   | Notes                                                                                                                    |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `<DatePicker>`                              | Props are listed below.                                                                                                  |
+| `<DateRangePicker>`                         | `value={{ start, end }}`, `minDays`, `maxDays`, `startName`/`endName` for forms.                                         |
+| `<MultiDatePicker>`                         | Several separate days: `value={['2026-10-18', …]}`, `maxDates`, `name` (one hidden input per day). Clicks toggle days.   |
+| `<Calendar>`                                | A standalone month view: `selected`, `onSelect`, `month`/`onMonthChange`, `selectionMode="range"`, `holidays`, `events`. |
+| `<DateText value="2026-09-26" />`           | "10 Ashwin 2083 · 26 Sep 2026". It has no hooks, so it's safe in server components (`@nepdatejs/react/server`).          |
+| `<ShortDate>`, `shortDate()`, `bothDates()` | Short text for tables and documents.                                                                                     |
+
+**`<DatePicker>` props:**
+
+- **Value:** `value`, `defaultValue`, `onChange(value, { ad, bs })`, `name` (submits with plain forms; form reset is supported).
+- **Calendar:** `calendar` (fixed BS or AD), `defaultCalendar`, `onCalendarChange`, `persistCalendar` (localStorage key).
+- **Limits:** `min`, `max`, `isDateDisabled`, `holidays`, `events`.
+- **Shortcuts:** `presets={['today', 'yesterday']}` (or custom `{ id, label, resolve }`) beside the calendar.
+- **Display:** `locale` (defaults to `ne` when `<html lang="ne">`), `displayFormat`, `showEquivalent`, `clearable`, `weekStartsOn`, `weekendDays`, `theme`.
+- **Inline:** `inline` keeps the calendar in the page under the input, always open.
+- **Typing:** dashes fill in as digits are typed (`20830624` → `2083-06-24`); `mask={false}` turns that off.
+- **Phones:** below 480px the panel opens as a bottom sheet. `panelLayout="popover"` or `"sheet"` forces one layout at any width.
+- **Field:** `required`, `disabled`, `placeholder`, `id`, `aria-*`.
+- **Testing and server rendering:** `today`.
+
+The panel opens in the browser's top layer, so dialogs and scrolling containers never clip it. Escape and outside clicks close it.
+
+## Headless hooks
+
+```tsx
+import { useDatePicker } from '@nepdatejs/react/headless';
+
+const picker = useDatePicker({ min: '2026-01-01' });
+<input {...picker.getInputProps()} />
+<button {...picker.getToggleProps()}>Open</button>
+{picker.state.open && (
+  <div {...picker.getPanelProps()}>
+    <table {...picker.calendar.getGridProps()}>…{/* picker.calendar.getDayProps(cell) */}</table>
+  </div>
+)}
+```
+
+`useCalendar`, `useDatePicker` and `useDateRangePicker` return the state, the actions and prop getters with the right ARIA and keyboard handling. Inline objects, arrays and functions in options are fine: values are compared by content and callbacks are wrapped once, so nothing re-renders in a loop.
+
+## Server rendering
+
+Nothing touches `window` during render. Pass `today` for markup that is identical on server and client. A remembered BS/AD choice is read after hydration.
+
+MIT © Shishir Rai

package/dist/date-text-BT82cZ7i.cjs

@@ -0,0 +1,84 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let _nepdatejs_core = require("@nepdatejs/core");
+//#region src/date-text.tsx
+/**
+* A server date shown in BS (or AD), with the other calendar alongside:
+* "10 Ashwin 2083 · 26 Sep 2026". No hooks, so it works in server components.
+*/
+function DateText({ value, calendar = "BS", withEquivalent = true, format = "long", locale = "en", fallback = "—", className }) {
+	const date = (0, _nepdatejs_core.fromIsoDate)(value);
+	if (!date) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className,
+		children: fallback
+	});
+	const other = calendar === "BS" ? "AD" : "BS";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("time", {
+		dateTime: (0, _nepdatejs_core.formatDate)(date, "Y-m-d"),
+		className,
+		children: [(0, _nepdatejs_core.formatDate)((0, _nepdatejs_core.toCalendar)(date, calendar), format, locale), withEquivalent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "ndp-muted",
+			style: { color: "var(--ndp-text-muted, #64748b)" },
+			children: [" · ", (0, _nepdatejs_core.formatDate)((0, _nepdatejs_core.toCalendar)(date, other), other === "AD" ? "j M Y" : format, locale)]
+		})]
+	});
+}
+/**
+* A server date as short text: "12 Ashwin 2083", keeping the time of day when
+* the value has one. A timestamp with a zone is read in the configured zone
+* (Nepal by default). Anything that is not a date is returned unchanged.
+*/
+function shortDate(value) {
+	if (!value) return null;
+	const instant = (0, _nepdatejs_core.fromIsoTimestamp)(value);
+	const date = instant?.date ?? (0, _nepdatejs_core.fromIsoDate)(value);
+	if (!date) return value;
+	const time = instant?.time ?? /[T ](\d{2}:\d{2})/.exec(value)?.[1];
+	return `${(0, _nepdatejs_core.formatDate)((0, _nepdatejs_core.toCalendar)(date, "BS"), "j F Y")}${time ? `, ${time}` : ""}`;
+}
+/** A server date as documents print it, in both calendars: "31 Shrawan 2083 (16 Aug 2026)". */
+function bothDates(value) {
+	const date = (0, _nepdatejs_core.fromIsoDate)(value);
+	return date ? `${(0, _nepdatejs_core.formatDate)((0, _nepdatejs_core.toCalendar)(date, "BS"), "j F Y")} (${(0, _nepdatejs_core.formatDate)(date, "j M Y")})` : value ?? "";
+}
+/** A server date for a table cell or list row, with the AD day on hover. */
+function ShortDate({ value, fallback = "—", className }) {
+	const text = shortDate(value);
+	const date = (0, _nepdatejs_core.fromIsoDate)(value);
+	if (!text) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className,
+		children: fallback
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+		dateTime: value ?? void 0,
+		title: date ? (0, _nepdatejs_core.formatDate)(date, "j M Y") : void 0,
+		className,
+		children: text
+	});
+}
+//#endregion
+Object.defineProperty(exports, "DateText", {
+	enumerable: true,
+	get: function() {
+		return DateText;
+	}
+});
+Object.defineProperty(exports, "ShortDate", {
+	enumerable: true,
+	get: function() {
+		return ShortDate;
+	}
+});
+Object.defineProperty(exports, "bothDates", {
+	enumerable: true,
+	get: function() {
+		return bothDates;
+	}
+});
+Object.defineProperty(exports, "shortDate", {
+	enumerable: true,
+	get: function() {
+		return shortDate;
+	}
+});
+
+//# sourceMappingURL=date-text-BT82cZ7i.cjs.map

package/dist/date-text-BT82cZ7i.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-text-BT82cZ7i.cjs","names":["fromIsoDate","formatDate","toCalendar","fromIsoTimestamp"],"sources":["../src/date-text.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  formatDate,\n  fromIsoDate,\n  fromIsoTimestamp,\n  toCalendar,\n  type CalendarSystem,\n  type DateFormatPattern,\n  type LocaleCode,\n} from '@nepdatejs/core';\n\nexport interface DateTextProps {\n  /** An AD date or timestamp from the server (\"2026-09-26\" or an ISO timestamp). */\n  value: string | null | undefined;\n  /** Which calendar to show first. Default 'BS'. */\n  calendar?: CalendarSystem | undefined;\n  /** Also show the day in the other calendar, muted. Default true. */\n  withEquivalent?: boolean | undefined;\n  format?: DateFormatPattern | undefined;\n  locale?: LocaleCode | undefined;\n  fallback?: string | undefined;\n  className?: string | undefined;\n}\n\n/**\n * A server date shown in BS (or AD), with the other calendar alongside:\n * \"10 Ashwin 2083 · 26 Sep 2026\". No hooks, so it works in server components.\n */\nexport function DateText({\n  value,\n  calendar = 'BS',\n  withEquivalent = true,\n  format = 'long',\n  locale = 'en',\n  fallback = '—',\n  className,\n}: DateTextProps): ReactElement {\n  const date = fromIsoDate(value);\n  if (!date) {\n    return <span className={className}>{fallback}</span>;\n  }\n  const other: CalendarSystem = calendar === 'BS' ? 'AD' : 'BS';\n\n  return (\n    <time dateTime={formatDate(date, 'Y-m-d')} className={className}>\n      {formatDate(toCalendar(date, calendar), format, locale)}\n      {withEquivalent && (\n        <span className=\"ndp-muted\" style={{ color: 'var(--ndp-text-muted, #64748b)' }}>\n          {' · '}\n          {formatDate(toCalendar(date, other), other === 'AD' ? 'j M Y' : format, locale)}\n        </span>\n      )}\n    </time>\n  );\n}\n\n/**\n * A server date as short text: \"12 Ashwin 2083\", keeping the time of day when\n * the value has one. A timestamp with a zone is read in the configured zone\n * (Nepal by default). Anything that is not a date is returned unchanged.\n */\nexport function shortDate(value: string | null | undefined): string | null {\n  if (!value) {\n    return null;\n  }\n  const instant = fromIsoTimestamp(value);\n  const date = instant?.date ?? fromIsoDate(value);\n  if (!date) {\n    return value;\n  }\n  const time = instant?.time ?? /[T ](\\d{2}:\\d{2})/.exec(value)?.[1];\n\n  return `${formatDate(toCalendar(date, 'BS'), 'j F Y')}${time ? `, ${time}` : ''}`;\n}\n\n/** A server date as documents print it, in both calendars: \"31 Shrawan 2083 (16 Aug 2026)\". */\nexport function bothDates(value: string | null | undefined): string {\n  const date = fromIsoDate(value);\n\n  return date\n    ? `${formatDate(toCalendar(date, 'BS'), 'j F Y')} (${formatDate(date, 'j M Y')})`\n    : (value ?? '');\n}\n\n/** A server date for a table cell or list row, with the AD day on hover. */\nexport function ShortDate({\n  value,\n  fallback = '—',\n  className,\n}: {\n  value: string | null | undefined;\n  fallback?: string | undefined;\n  className?: string | undefined;\n}): ReactElement {\n  const text = shortDate(value);\n  const date = fromIsoDate(value);\n  if (!text) {\n    return <span className={className}>{fallback}</span>;\n  }\n\n  return (\n    <time\n      dateTime={value ?? undefined}\n      title={date ? formatDate(date, 'j M Y') : undefined}\n      className={className}\n    >\n      {text}\n    </time>\n  );\n}\n"],"mappings":";;;;;;;AA4BA,SAAgB,SAAS,EACvB,OACA,WAAW,MACX,iBAAiB,MACjB,SAAS,QACT,SAAS,MACT,WAAW,KACX,aAC8B;CAC9B,MAAM,QAAA,GAAOA,gBAAAA,YAAAA,CAAY,KAAK;CAC9B,IAAI,CAAC,MACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAiB;EAAY,UAAA;CAAe,CAAA;CAErD,MAAM,QAAwB,aAAa,OAAO,OAAO;CAEzD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAA,GAAUC,gBAAAA,WAAAA,CAAW,MAAM,OAAO;EAAc;EAAtD,UAAA,EAAA,GACGA,gBAAAA,WAAAA,EAAAA,GAAWC,gBAAAA,WAAAA,CAAW,MAAM,QAAQ,GAAG,QAAQ,MAAM,GACrD,kBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAY,OAAO,EAAE,OAAO,iCAAiC;GAA7E,UAAA,CACG,QAAA,GACAD,gBAAAA,WAAAA,EAAAA,GAAWC,gBAAAA,WAAAA,CAAW,MAAM,KAAK,GAAG,UAAU,OAAO,UAAU,QAAQ,MAAM,CAC1E;EAEJ,CAAA,CAAA;;AAEV;;;;;;AAOA,SAAgB,UAAU,OAAiD;CACzE,IAAI,CAAC,OACH,OAAO;CAET,MAAM,WAAA,GAAUC,gBAAAA,iBAAAA,CAAiB,KAAK;CACtC,MAAM,OAAO,SAAS,SAAA,GAAQH,gBAAAA,YAAAA,CAAY,KAAK;CAC/C,IAAI,CAAC,MACH,OAAO;CAET,MAAM,OAAO,SAAS,QAAQ,oBAAoB,KAAK,KAAK,CAAC,GAAG;CAEhE,OAAO,IAAA,GAAGC,gBAAAA,WAAAA,EAAAA,GAAWC,gBAAAA,WAAAA,CAAW,MAAM,IAAI,GAAG,OAAO,IAAI,OAAO,KAAK,SAAS;AAC/E;;AAGA,SAAgB,UAAU,OAA0C;CAClE,MAAM,QAAA,GAAOF,gBAAAA,YAAAA,CAAY,KAAK;CAE9B,OAAO,OACH,IAAA,GAAGC,gBAAAA,WAAAA,EAAAA,GAAWC,gBAAAA,WAAAA,CAAW,MAAM,IAAI,GAAG,OAAO,EAAE,KAAA,GAAID,gBAAAA,WAAAA,CAAW,MAAM,OAAO,EAAE,KAC5E,SAAS;AAChB;;AAGA,SAAgB,UAAU,EACxB,OACA,WAAW,KACX,aAKe;CACf,MAAM,OAAO,UAAU,KAAK;CAC5B,MAAM,QAAA,GAAOD,gBAAAA,YAAAA,CAAY,KAAK;CAC9B,IAAI,CAAC,MACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAiB;EAAY,UAAA;CAAe,CAAA;CAGrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,UAAU,SAAS,KAAA;EACnB,OAAO,QAAA,GAAOC,gBAAAA,WAAAA,CAAW,MAAM,OAAO,IAAI,KAAA;EAC/B;EAEV,UAAA;CACG,CAAA;AAEV"}

package/dist/date-text-Df1gFksR.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatDate, fromIsoDate, fromIsoTimestamp, toCalendar } from "@nepdatejs/core";
+//#region src/date-text.tsx
+/**
+* A server date shown in BS (or AD), with the other calendar alongside:
+* "10 Ashwin 2083 · 26 Sep 2026". No hooks, so it works in server components.
+*/
+function DateText({ value, calendar = "BS", withEquivalent = true, format = "long", locale = "en", fallback = "—", className }) {
+	const date = fromIsoDate(value);
+	if (!date) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: fallback
+	});
+	const other = calendar === "BS" ? "AD" : "BS";
+	return /* @__PURE__ */ jsxs("time", {
+		dateTime: formatDate(date, "Y-m-d"),
+		className,
+		children: [formatDate(toCalendar(date, calendar), format, locale), withEquivalent && /* @__PURE__ */ jsxs("span", {
+			className: "ndp-muted",
+			style: { color: "var(--ndp-text-muted, #64748b)" },
+			children: [" · ", formatDate(toCalendar(date, other), other === "AD" ? "j M Y" : format, locale)]
+		})]
+	});
+}
+/**
+* A server date as short text: "12 Ashwin 2083", keeping the time of day when
+* the value has one. A timestamp with a zone is read in the configured zone
+* (Nepal by default). Anything that is not a date is returned unchanged.
+*/
+function shortDate(value) {
+	if (!value) return null;
+	const instant = fromIsoTimestamp(value);
+	const date = instant?.date ?? fromIsoDate(value);
+	if (!date) return value;
+	const time = instant?.time ?? /[T ](\d{2}:\d{2})/.exec(value)?.[1];
+	return `${formatDate(toCalendar(date, "BS"), "j F Y")}${time ? `, ${time}` : ""}`;
+}
+/** A server date as documents print it, in both calendars: "31 Shrawan 2083 (16 Aug 2026)". */
+function bothDates(value) {
+	const date = fromIsoDate(value);
+	return date ? `${formatDate(toCalendar(date, "BS"), "j F Y")} (${formatDate(date, "j M Y")})` : value ?? "";
+}
+/** A server date for a table cell or list row, with the AD day on hover. */
+function ShortDate({ value, fallback = "—", className }) {
+	const text = shortDate(value);
+	const date = fromIsoDate(value);
+	if (!text) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: fallback
+	});
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: value ?? void 0,
+		title: date ? formatDate(date, "j M Y") : void 0,
+		className,
+		children: text
+	});
+}
+//#endregion
+export { shortDate as i, ShortDate as n, bothDates as r, DateText as t };
+
+//# sourceMappingURL=date-text-Df1gFksR.js.map

package/dist/date-text-Df1gFksR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-text-Df1gFksR.js","names":[],"sources":["../src/date-text.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport {\n  formatDate,\n  fromIsoDate,\n  fromIsoTimestamp,\n  toCalendar,\n  type CalendarSystem,\n  type DateFormatPattern,\n  type LocaleCode,\n} from '@nepdatejs/core';\n\nexport interface DateTextProps {\n  /** An AD date or timestamp from the server (\"2026-09-26\" or an ISO timestamp). */\n  value: string | null | undefined;\n  /** Which calendar to show first. Default 'BS'. */\n  calendar?: CalendarSystem | undefined;\n  /** Also show the day in the other calendar, muted. Default true. */\n  withEquivalent?: boolean | undefined;\n  format?: DateFormatPattern | undefined;\n  locale?: LocaleCode | undefined;\n  fallback?: string | undefined;\n  className?: string | undefined;\n}\n\n/**\n * A server date shown in BS (or AD), with the other calendar alongside:\n * \"10 Ashwin 2083 · 26 Sep 2026\". No hooks, so it works in server components.\n */\nexport function DateText({\n  value,\n  calendar = 'BS',\n  withEquivalent = true,\n  format = 'long',\n  locale = 'en',\n  fallback = '—',\n  className,\n}: DateTextProps): ReactElement {\n  const date = fromIsoDate(value);\n  if (!date) {\n    return <span className={className}>{fallback}</span>;\n  }\n  const other: CalendarSystem = calendar === 'BS' ? 'AD' : 'BS';\n\n  return (\n    <time dateTime={formatDate(date, 'Y-m-d')} className={className}>\n      {formatDate(toCalendar(date, calendar), format, locale)}\n      {withEquivalent && (\n        <span className=\"ndp-muted\" style={{ color: 'var(--ndp-text-muted, #64748b)' }}>\n          {' · '}\n          {formatDate(toCalendar(date, other), other === 'AD' ? 'j M Y' : format, locale)}\n        </span>\n      )}\n    </time>\n  );\n}\n\n/**\n * A server date as short text: \"12 Ashwin 2083\", keeping the time of day when\n * the value has one. A timestamp with a zone is read in the configured zone\n * (Nepal by default). Anything that is not a date is returned unchanged.\n */\nexport function shortDate(value: string | null | undefined): string | null {\n  if (!value) {\n    return null;\n  }\n  const instant = fromIsoTimestamp(value);\n  const date = instant?.date ?? fromIsoDate(value);\n  if (!date) {\n    return value;\n  }\n  const time = instant?.time ?? /[T ](\\d{2}:\\d{2})/.exec(value)?.[1];\n\n  return `${formatDate(toCalendar(date, 'BS'), 'j F Y')}${time ? `, ${time}` : ''}`;\n}\n\n/** A server date as documents print it, in both calendars: \"31 Shrawan 2083 (16 Aug 2026)\". */\nexport function bothDates(value: string | null | undefined): string {\n  const date = fromIsoDate(value);\n\n  return date\n    ? `${formatDate(toCalendar(date, 'BS'), 'j F Y')} (${formatDate(date, 'j M Y')})`\n    : (value ?? '');\n}\n\n/** A server date for a table cell or list row, with the AD day on hover. */\nexport function ShortDate({\n  value,\n  fallback = '—',\n  className,\n}: {\n  value: string | null | undefined;\n  fallback?: string | undefined;\n  className?: string | undefined;\n}): ReactElement {\n  const text = shortDate(value);\n  const date = fromIsoDate(value);\n  if (!text) {\n    return <span className={className}>{fallback}</span>;\n  }\n\n  return (\n    <time\n      dateTime={value ?? undefined}\n      title={date ? formatDate(date, 'j M Y') : undefined}\n      className={className}\n    >\n      {text}\n    </time>\n  );\n}\n"],"mappings":";;;;;;;AA4BA,SAAgB,SAAS,EACvB,OACA,WAAW,MACX,iBAAiB,MACjB,SAAS,QACT,SAAS,MACT,WAAW,KACX,aAC8B;CAC9B,MAAM,OAAO,YAAY,KAAK;CAC9B,IAAI,CAAC,MACH,OAAO,oBAAC,QAAD;EAAiB;EAAY,UAAA;CAAe,CAAA;CAErD,MAAM,QAAwB,aAAa,OAAO,OAAO;CAEzD,OACE,qBAAC,QAAD;EAAM,UAAU,WAAW,MAAM,OAAO;EAAc;EAAtD,UAAA,CACG,WAAW,WAAW,MAAM,QAAQ,GAAG,QAAQ,MAAM,GACrD,kBACC,qBAAC,QAAD;GAAM,WAAU;GAAY,OAAO,EAAE,OAAO,iCAAiC;GAA7E,UAAA,CACG,OACA,WAAW,WAAW,MAAM,KAAK,GAAG,UAAU,OAAO,UAAU,QAAQ,MAAM,CAC1E;EAEJ,CAAA,CAAA;;AAEV;;;;;;AAOA,SAAgB,UAAU,OAAiD;CACzE,IAAI,CAAC,OACH,OAAO;CAET,MAAM,UAAU,iBAAiB,KAAK;CACtC,MAAM,OAAO,SAAS,QAAQ,YAAY,KAAK;CAC/C,IAAI,CAAC,MACH,OAAO;CAET,MAAM,OAAO,SAAS,QAAQ,oBAAoB,KAAK,KAAK,CAAC,GAAG;CAEhE,OAAO,GAAG,WAAW,WAAW,MAAM,IAAI,GAAG,OAAO,IAAI,OAAO,KAAK,SAAS;AAC/E;;AAGA,SAAgB,UAAU,OAA0C;CAClE,MAAM,OAAO,YAAY,KAAK;CAE9B,OAAO,OACH,GAAG,WAAW,WAAW,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,WAAW,MAAM,OAAO,EAAE,KAC5E,SAAS;AAChB;;AAGA,SAAgB,UAAU,EACxB,OACA,WAAW,KACX,aAKe;CACf,MAAM,OAAO,UAAU,KAAK;CAC5B,MAAM,OAAO,YAAY,KAAK;CAC9B,IAAI,CAAC,MACH,OAAO,oBAAC,QAAD;EAAiB;EAAY,UAAA;CAAe,CAAA;CAGrD,OACE,oBAAC,QAAD;EACE,UAAU,SAAS,KAAA;EACnB,OAAO,OAAO,WAAW,MAAM,OAAO,IAAI,KAAA;EAC/B;EAEV,UAAA;CACG,CAAA;AAEV"}

package/dist/date-text-Dipetpbp.d.cts

@@ -0,0 +1,37 @@
+import { ReactElement } from "react";
+import { CalendarSystem, DateFormatPattern, LocaleCode } from "@nepdatejs/core";
+//#region src/date-text.d.ts
+interface DateTextProps {
+  /** An AD date or timestamp from the server ("2026-09-26" or an ISO timestamp). */
+  value: string | null | undefined;
+  /** Which calendar to show first. Default 'BS'. */
+  calendar?: CalendarSystem | undefined;
+  /** Also show the day in the other calendar, muted. Default true. */
+  withEquivalent?: boolean | undefined;
+  format?: DateFormatPattern | undefined;
+  locale?: LocaleCode | undefined;
+  fallback?: string | undefined;
+  className?: string | undefined;
+}
+/**
+ * A server date shown in BS (or AD), with the other calendar alongside:
+ * "10 Ashwin 2083 · 26 Sep 2026". No hooks, so it works in server components.
+ */
+declare function DateText({ value, calendar, withEquivalent, format, locale, fallback, className }: DateTextProps): ReactElement;
+/**
+ * A server date as short text: "12 Ashwin 2083", keeping the time of day when
+ * the value has one. A timestamp with a zone is read in the configured zone
+ * (Nepal by default). Anything that is not a date is returned unchanged.
+ */
+declare function shortDate(value: string | null | undefined): string | null;
+/** A server date as documents print it, in both calendars: "31 Shrawan 2083 (16 Aug 2026)". */
+declare function bothDates(value: string | null | undefined): string;
+/** A server date for a table cell or list row, with the AD day on hover. */
+declare function ShortDate({ value, fallback, className }: {
+  value: string | null | undefined;
+  fallback?: string | undefined;
+  className?: string | undefined;
+}): ReactElement;
+//#endregion
+export { shortDate as a, bothDates as i, DateTextProps as n, ShortDate as r, DateText as t };
+//# sourceMappingURL=date-text-Dipetpbp.d.cts.map

package/dist/date-text-Dipetpbp.d.ts

@@ -0,0 +1,37 @@
+import { ReactElement } from "react";
+import { CalendarSystem, DateFormatPattern, LocaleCode } from "@nepdatejs/core";
+//#region src/date-text.d.ts
+interface DateTextProps {
+  /** An AD date or timestamp from the server ("2026-09-26" or an ISO timestamp). */
+  value: string | null | undefined;
+  /** Which calendar to show first. Default 'BS'. */
+  calendar?: CalendarSystem | undefined;
+  /** Also show the day in the other calendar, muted. Default true. */
+  withEquivalent?: boolean | undefined;
+  format?: DateFormatPattern | undefined;
+  locale?: LocaleCode | undefined;
+  fallback?: string | undefined;
+  className?: string | undefined;
+}
+/**
+ * A server date shown in BS (or AD), with the other calendar alongside:
+ * "10 Ashwin 2083 · 26 Sep 2026". No hooks, so it works in server components.
+ */
+declare function DateText({ value, calendar, withEquivalent, format, locale, fallback, className }: DateTextProps): ReactElement;
+/**
+ * A server date as short text: "12 Ashwin 2083", keeping the time of day when
+ * the value has one. A timestamp with a zone is read in the configured zone
+ * (Nepal by default). Anything that is not a date is returned unchanged.
+ */
+declare function shortDate(value: string | null | undefined): string | null;
+/** A server date as documents print it, in both calendars: "31 Shrawan 2083 (16 Aug 2026)". */
+declare function bothDates(value: string | null | undefined): string;
+/** A server date for a table cell or list row, with the AD day on hover. */
+declare function ShortDate({ value, fallback, className }: {
+  value: string | null | undefined;
+  fallback?: string | undefined;
+  className?: string | undefined;
+}): ReactElement;
+//#endregion
+export { shortDate as a, bothDates as i, DateTextProps as n, ShortDate as r, DateText as t };
+//# sourceMappingURL=date-text-Dipetpbp.d.ts.map

package/dist/headless-6BuUOtOR.d.cts

@@ -0,0 +1,194 @@
+import { ChangeEvent, KeyboardEvent, Ref } from "react";
+import { CalendarDate, CalendarSystem, LocaleCode } from "@nepdatejs/core";
+import { CalendarActions, CalendarOptions, CalendarState, CalendarStore, DayCell, PickerCell } from "@nepdatejs/calendar";
+import { DatePickerOptions, DatePickerState, DatePickerStore, DateRangePickerOptions, DateRangePickerState, DateRangePickerStore, DateTimePickerOptions, DateTimePickerState, DateTimePickerStore, MultiDatePickerOptions, MultiDatePickerState, MultiDatePickerStore, PresetState, RangeField } from "@nepdatejs/datepicker";
+//#region src/bindings.d.ts
+type DataAttrs = Record<`data-${string}`, string | boolean | undefined>;
+interface ButtonProps extends DataAttrs {
+  type: "button";
+  tabIndex?: number;
+  disabled?: boolean;
+  "aria-label"?: string;
+  "aria-pressed"?: boolean;
+  "aria-current"?: "date";
+  onClick: () => void;
+  onFocus?: () => void;
+  onMouseEnter?: () => void;
+}
+interface GridProps {
+  role: "grid";
+  "aria-label": string;
+  ref: Ref<HTMLTableElement>;
+  onKeyDown: (event: KeyboardEvent) => void;
+  onMouseLeave: () => void;
+}
+/** Prop getters that turn a calendar store into accessible markup. */
+interface CalendarBindings {
+  readonly state: CalendarState;
+  readonly actions: CalendarActions;
+  readonly getGridProps: () => GridProps;
+  readonly getDayProps: (cell: DayCell) => ButtonProps;
+  readonly getPrevProps: () => ButtonProps;
+  readonly getNextProps: () => ButtonProps;
+  /** The title buttons: month and year in the day view, the year (or page) otherwise. */
+  readonly getTitleButtons: () => {
+    key: string;
+    label: string;
+    props: ButtonProps;
+  }[];
+  readonly getOptionProps: (tile: PickerCell, index: number, tiles: readonly PickerCell[]) => ButtonProps;
+  /** Move focus into the grid (e.g. when a panel opens). */
+  readonly focusGrid: () => void;
+}
+declare function useCalendarBindings(state: CalendarState, actions: CalendarActions, locale: LocaleCode | undefined, options: {
+  /** The store's latest snapshot, to tell whether a key press changed anything. */
+  readonly getSnapshot: () => CalendarState;
+  readonly onDayActivate?: ((date: CalendarDate) => void) | undefined;
+}): CalendarBindings;
+//#endregion
+//#region src/hooks.d.ts
+/** A standalone calendar: state, actions and prop getters. */
+declare function useCalendar(options?: CalendarOptions): CalendarBindings & {
+  store: CalendarStore;
+};
+interface InputProps {
+  id: string;
+  /** Left out for an inline picker, whose calendar is always in the page. */
+  role?: "combobox";
+  type: "text";
+  inputMode: "numeric";
+  autoComplete: "off";
+  value: string;
+  placeholder: string;
+  "aria-haspopup"?: "dialog";
+  "aria-expanded"?: boolean;
+  "aria-controls": string;
+  "aria-invalid"?: true;
+  "aria-describedby"?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onBlur: () => void;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+interface PanelProps {
+  id: string;
+  /** 'group' for an inline picker. */
+  role: "dialog" | "group";
+  "aria-label": string;
+}
+interface DatePickerBindings {
+  readonly state: DatePickerState;
+  readonly actions: DatePickerStore["actions"];
+  readonly store: DatePickerStore;
+  /** Prop getters for the panel's calendar. */
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    input: string;
+    panel: string;
+    hint: string;
+  };
+  getInputProps(extra?: {
+    id?: string | undefined;
+  }): InputProps;
+  getToggleProps(): ButtonProps & {
+    "aria-expanded": boolean;
+    "aria-controls": string;
+  };
+  getClearProps(): ButtonProps;
+  /** The BS/AD switch inside the input. */
+  getSwitchProps(): ButtonProps;
+  /** One button of the BS/AD segment in the panel footer. */
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getTodayProps(): ButtonProps;
+  getPanelProps(): PanelProps;
+  /** A shortcut button (see state.presets). */
+  getPresetProps(preset: PresetState): ButtonProps;
+}
+/** A BS/AD date picker without markup: wire the getters to your own elements. */
+declare function useDatePicker(options?: DatePickerOptions & {
+  id?: string | undefined;
+}): DatePickerBindings;
+interface DateRangePickerBindings {
+  readonly state: DateRangePickerState;
+  readonly actions: DateRangePickerStore["actions"];
+  readonly store: DateRangePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    start: string;
+    end: string;
+    panel: string;
+    hint: string;
+  };
+  getInputProps(field: RangeField): Omit<InputProps, "onChange" | "onBlur"> & {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+  };
+  getToggleProps(): ButtonProps & {
+    "aria-expanded": boolean;
+    "aria-controls": string;
+  };
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getPanelProps(): PanelProps;
+  getPresetProps(preset: PresetState): ButtonProps;
+}
+/** A BS/AD date range picker without markup. */
+declare function useDateRangePicker(options?: DateRangePickerOptions): DateRangePickerBindings;
+interface DateTimePickerBindings {
+  readonly state: DateTimePickerState;
+  readonly actions: DateTimePickerStore["actions"];
+  readonly store: DateTimePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    date: string;
+    time: string;
+    panel: string;
+    hint: string;
+  };
+}
+/** A BS/AD date + time picker without markup. The value is a zoned ISO timestamp. */
+declare function useDateTimePicker(options?: DateTimePickerOptions & {
+  id?: string | undefined;
+}): DateTimePickerBindings;
+interface MultiDatePickerBindings {
+  readonly state: MultiDatePickerState;
+  readonly actions: MultiDatePickerStore["actions"];
+  readonly store: MultiDatePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    input: string;
+    panel: string;
+    hint: string;
+  };
+  getInputProps(): InputProps;
+  getToggleProps(): ButtonProps & {
+    "aria-expanded": boolean;
+    "aria-controls": string;
+  };
+  getClearProps(): ButtonProps;
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getPanelProps(): PanelProps;
+}
+/** A picker for several separate BS/AD days, without markup (PICK-001). */
+declare function useMultiDatePicker(options?: MultiDatePickerOptions & {
+  id?: string | undefined;
+}): MultiDatePickerBindings;
+//#endregion
+//#region src/use-store.d.ts
+interface StoreLike<O, S> {
+  getState(): S;
+  subscribe(listener: () => void): () => void;
+  setOptions(changes: Partial<O>): void;
+}
+/**
+ * Create a store once and keep its options in step with props, without
+ * loops: functions are wrapped once so their identity never changes, and data
+ * options are compared by value, so inline objects and arrays are fine.
+ */
+declare function useStore<O extends object, S, T extends StoreLike<O, S>>(create: (options: O) => T, options: O): {
+  store: T;
+  state: S;
+};
+/** Structural equality for plain data (dates, ranges, lists); identity for everything else. */
+declare function deepEqual(a: unknown, b: unknown): boolean;
+//#endregion
+export { useCalendarBindings as _, DateTimePickerBindings as a, PanelProps as c, useDateRangePicker as d, useDateTimePicker as f, GridProps as g, CalendarBindings as h, DateRangePickerBindings as i, useCalendar as l, ButtonProps as m, useStore as n, InputProps as o, useMultiDatePicker as p, DatePickerBindings as r, MultiDatePickerBindings as s, deepEqual as t, useDatePicker as u };
+//# sourceMappingURL=headless-6BuUOtOR.d.cts.map