@nucleux/calendar 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+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

@@ -0,0 +1,26 @@
+# @nucleux/calendar
+
+Month calendar / date grid — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+## Install
+
+```bash
+pnpm add @nucleux/calendar @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Calendar } from "@nucleux/calendar";
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,54 @@
+"use client";
+'use strict';
+
+require('react');
+var lucideReact = require('lucide-react');
+var reactDayPicker = require('react-day-picker');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/index.tsx
+function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+  const navButton = "inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent p-0 text-foreground opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none disabled:opacity-30";
+  const dayButton = "inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
+    {
+      showOutsideDays,
+      className: utils.cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row gap-4",
+        month: "flex flex-col gap-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium text-foreground",
+        nav: "flex items-center gap-1",
+        nav_button: navButton,
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground",
+        row: "flex w-full mt-2",
+        cell: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+        day: dayButton,
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "text-muted-foreground opacity-50",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        IconLeft: () => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+        IconRight: () => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+exports.Calendar = Calendar;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["jsx","DayPicker","cn","ChevronLeft","ChevronRight"],"mappings":";;;;;;;;;AAWO,SAAS,QAAA,CAAS,EAAE,SAAA,EAAW,UAAA,EAAY,kBAAkB,IAAA,EAAM,GAAG,OAAM,EAAkB;AACnG,EAAA,MAAM,SAAA,GACJ,oNAAA;AACF,EAAA,MAAM,SAAA,GACJ,6LAAA;AAEF,EAAA,uBACEA,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,SAAA,EAAWC,QAAA,CAAG,KAAA,EAAO,SAAS,CAAA;AAAA,MAC9B,UAAA,EAAY;AAAA,QACV,MAAA,EAAQ,iCAAA;AAAA,QACR,KAAA,EAAO,qBAAA;AAAA,QACP,OAAA,EAAS,gDAAA;AAAA,QACT,aAAA,EAAe,qCAAA;AAAA,QACf,GAAA,EAAK,yBAAA;AAAA,QACL,UAAA,EAAY,SAAA;AAAA,QACZ,mBAAA,EAAqB,iBAAA;AAAA,QACrB,eAAA,EAAiB,kBAAA;AAAA,QACjB,KAAA,EAAO,kCAAA;AAAA,QACP,QAAA,EAAU,MAAA;AAAA,QACV,SAAA,EAAW,gEAAA;AAAA,QACX,GAAA,EAAK,kBAAA;AAAA,QACL,IAAA,EAAM,0EAAA;AAAA,QACN,GAAA,EAAK,SAAA;AAAA,QACL,YAAA,EACE,kIAAA;AAAA,QACF,SAAA,EAAW,kCAAA;AAAA,QACX,WAAA,EAAa,kCAAA;AAAA,QACb,YAAA,EAAc,kCAAA;AAAA,QACd,gBAAA,EAAkB,8DAAA;AAAA,QAClB,UAAA,EAAY,WAAA;AAAA,QACZ,GAAG;AAAA,OACL;AAAA,MACA,UAAA,EAAY;AAAA,QACV,QAAA,EAAU,sBAAMF,cAAA,CAACG,uBAAA,EAAA,EAAY,WAAU,SAAA,EAAU,CAAA;AAAA,QACjD,SAAA,EAAW,sBAAMH,cAAA,CAACI,wBAAA,EAAA,EAAa,WAAU,SAAA,EAAU;AAAA,OACrD;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\n/**\n * A month calendar / date grid built on react-day-picker, restyled with Nucleux\n * tokens. Supports single, multiple, and range selection via the `mode` prop.\n */\nexport function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  const navButton =\n    \"inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent p-0 text-foreground opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none disabled:opacity-30\";\n  const dayButton =\n    \"inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100\";\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row gap-4\",\n        month: \"flex flex-col gap-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium text-foreground\",\n        nav: \"flex items-center gap-1\",\n        nav_button: navButton,\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground\",\n        row: \"flex w-full mt-2\",\n        cell: \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20\",\n        day: dayButton,\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: () => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: () => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  );\n}\nCalendar.displayName = \"Calendar\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+/**
+ * A month calendar / date grid built on react-day-picker, restyled with Nucleux
+ * tokens. Supports single, multiple, and range selection via the `mode` prop.
+ */
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+export { Calendar, type CalendarProps };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+/**
+ * A month calendar / date grid built on react-day-picker, restyled with Nucleux
+ * tokens. Supports single, multiple, and range selection via the `mode` prop.
+ */
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+export { Calendar, type CalendarProps };

package/dist/index.js

@@ -0,0 +1,52 @@
+"use client";
+import 'react';
+import { ChevronRight, ChevronLeft } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+import { cn } from '@nucleux/utils';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+  const navButton = "inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent p-0 text-foreground opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none disabled:opacity-30";
+  const dayButton = "inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100";
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row gap-4",
+        month: "flex flex-col gap-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium text-foreground",
+        nav: "flex items-center gap-1",
+        nav_button: navButton,
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground",
+        row: "flex w-full mt-2",
+        cell: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+        day: dayButton,
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "text-muted-foreground opacity-50",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        IconLeft: () => /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+        IconRight: () => /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;AAWO,SAAS,QAAA,CAAS,EAAE,SAAA,EAAW,UAAA,EAAY,kBAAkB,IAAA,EAAM,GAAG,OAAM,EAAkB;AACnG,EAAA,MAAM,SAAA,GACJ,oNAAA;AACF,EAAA,MAAM,SAAA,GACJ,6LAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,KAAA,EAAO,SAAS,CAAA;AAAA,MAC9B,UAAA,EAAY;AAAA,QACV,MAAA,EAAQ,iCAAA;AAAA,QACR,KAAA,EAAO,qBAAA;AAAA,QACP,OAAA,EAAS,gDAAA;AAAA,QACT,aAAA,EAAe,qCAAA;AAAA,QACf,GAAA,EAAK,yBAAA;AAAA,QACL,UAAA,EAAY,SAAA;AAAA,QACZ,mBAAA,EAAqB,iBAAA;AAAA,QACrB,eAAA,EAAiB,kBAAA;AAAA,QACjB,KAAA,EAAO,kCAAA;AAAA,QACP,QAAA,EAAU,MAAA;AAAA,QACV,SAAA,EAAW,gEAAA;AAAA,QACX,GAAA,EAAK,kBAAA;AAAA,QACL,IAAA,EAAM,0EAAA;AAAA,QACN,GAAA,EAAK,SAAA;AAAA,QACL,YAAA,EACE,kIAAA;AAAA,QACF,SAAA,EAAW,kCAAA;AAAA,QACX,WAAA,EAAa,kCAAA;AAAA,QACb,YAAA,EAAc,kCAAA;AAAA,QACd,gBAAA,EAAkB,8DAAA;AAAA,QAClB,UAAA,EAAY,WAAA;AAAA,QACZ,GAAG;AAAA,OACL;AAAA,MACA,UAAA,EAAY;AAAA,QACV,QAAA,EAAU,sBAAM,GAAA,CAAC,WAAA,EAAA,EAAY,WAAU,SAAA,EAAU,CAAA;AAAA,QACjD,SAAA,EAAW,sBAAM,GAAA,CAAC,YAAA,EAAA,EAAa,WAAU,SAAA,EAAU;AAAA,OACrD;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\n/**\n * A month calendar / date grid built on react-day-picker, restyled with Nucleux\n * tokens. Supports single, multiple, and range selection via the `mode` prop.\n */\nexport function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  const navButton =\n    \"inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent p-0 text-foreground opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none disabled:opacity-30\";\n  const dayButton =\n    \"inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal text-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100\";\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row gap-4\",\n        month: \"flex flex-col gap-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium text-foreground\",\n        nav: \"flex items-center gap-1\",\n        nav_button: navButton,\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell: \"w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground\",\n        row: \"flex w-full mt-2\",\n        cell: \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20\",\n        day: dayButton,\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle: \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: () => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: () => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  );\n}\nCalendar.displayName = \"Calendar\";\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@nucleux/calendar",
+  "version": "0.2.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Month calendar / date grid — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "calendar"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "react-day-picker": "^8.10.1",
+    "@nucleux/utils": "0.2.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/calendar"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}