@nucleux/md3-date-picker 0.4.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/md3-date-picker
+
+Material 3 date picker — 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/md3-date-picker @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3DatePicker } from "@nucleux/md3-date-picker";
+```
+
+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,106 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var calendar = require('@nucleux/calendar');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var formatDate = (d) => d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+var md3CalendarClassNames = {
+  caption_label: "text-sm font-medium text-md-on-surface",
+  nav_button: "inline-flex h-8 w-8 items-center justify-center rounded-full text-md-on-surface-variant hover:bg-md-on-surface/[0.08]",
+  head_cell: "w-9 text-xs font-normal text-md-on-surface-variant",
+  day: "inline-flex h-9 w-9 items-center justify-center rounded-full text-sm text-md-on-surface hover:bg-md-on-surface/[0.08]",
+  day_selected: "bg-md-primary text-md-on-primary hover:bg-md-primary",
+  day_today: "border border-md-primary",
+  day_outside: "text-md-on-surface-variant opacity-40"
+};
+var Md3DatePicker = React__namespace.forwardRef(
+  ({ value, defaultValue, onValueChange, label = "Date", disabled = false, className, "aria-label": ariaLabel, ...rest }, ref) => {
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = React__namespace.useState(defaultValue);
+    const selected = isControlled ? value : internal;
+    const [open, setOpen] = React__namespace.useState(false);
+    const rootRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        if (!rootRef.current?.contains(e.target)) setOpen(false);
+      };
+      const onKey = (e) => e.key === "Escape" && setOpen(false);
+      document.addEventListener("mousedown", onDown);
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("mousedown", onDown);
+        document.removeEventListener("keydown", onKey);
+      };
+    }, [open]);
+    const choose = (date) => {
+      if (!isControlled) setInternal(date);
+      onValueChange?.(date);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn("relative inline-block", className), ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          disabled,
+          "aria-label": ariaLabel ?? label,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          onClick: () => setOpen((o) => !o),
+          className: utils.cn(
+            "flex h-14 w-64 items-center justify-between gap-2 rounded-md-xs border border-md-outline bg-transparent px-4 text-left text-base text-md-on-surface outline-none focus-visible:border-md-primary",
+            "disabled:pointer-events-none disabled:opacity-[0.38]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("flex flex-col", !selected && "justify-center"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-md-on-surface-variant", children: label }),
+              selected && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDate(selected) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarDays, { "aria-hidden": true, className: "h-5 w-5 shrink-0 text-md-on-surface-variant" })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-label": "Choose date",
+          className: "absolute z-50 mt-2 animate-nx-fade-in rounded-md-md bg-md-surface-container-high p-2 shadow-md-3",
+          children: /* @__PURE__ */ jsxRuntime.jsx(calendar.Calendar, { mode: "single", selected, onSelect: choose, classNames: md3CalendarClassNames, initialFocus: true })
+        }
+      )
+    ] });
+  }
+);
+Md3DatePicker.displayName = "Md3DatePicker";
+
+exports.Md3DatePicker = Md3DatePicker;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx","CalendarDays","Calendar"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { CalendarDays } from \"lucide-react\";\nimport { Calendar } from \"@nucleux/calendar\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface Md3DatePickerProps {\n  value?: Date;\n  defaultValue?: Date;\n  onValueChange?: (date: Date | undefined) => void;\n  label?: string;\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n}\n\nconst formatDate = (d: Date) =>\n  d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n\n// Material 3 restyle of the react-day-picker grid.\nconst md3CalendarClassNames = {\n  caption_label: \"text-sm font-medium text-md-on-surface\",\n  nav_button:\n    \"inline-flex h-8 w-8 items-center justify-center rounded-full text-md-on-surface-variant hover:bg-md-on-surface/[0.08]\",\n  head_cell: \"w-9 text-xs font-normal text-md-on-surface-variant\",\n  day: \"inline-flex h-9 w-9 items-center justify-center rounded-full text-sm text-md-on-surface hover:bg-md-on-surface/[0.08]\",\n  day_selected: \"bg-md-primary text-md-on-primary hover:bg-md-primary\",\n  day_today: \"border border-md-primary\",\n  day_outside: \"text-md-on-surface-variant opacity-40\",\n} as const;\n\n/** A Material Design 3 date picker: an outlined field that opens a calendar. */\nexport const Md3DatePicker = React.forwardRef<HTMLButtonElement, Md3DatePickerProps>(\n  ({ value, defaultValue, onValueChange, label = \"Date\", disabled = false, className, \"aria-label\": ariaLabel, ...rest }, ref) => {\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = React.useState<Date | undefined>(defaultValue);\n    const selected = isControlled ? value : internal;\n    const [open, setOpen] = React.useState(false);\n    const rootRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n      if (!open) return;\n      const onDown = (e: MouseEvent) => {\n        if (!rootRef.current?.contains(e.target as Node)) setOpen(false);\n      };\n      const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpen(false);\n      document.addEventListener(\"mousedown\", onDown);\n      document.addEventListener(\"keydown\", onKey);\n      return () => {\n        document.removeEventListener(\"mousedown\", onDown);\n        document.removeEventListener(\"keydown\", onKey);\n      };\n    }, [open]);\n\n    const choose = (date: Date | undefined) => {\n      if (!isControlled) setInternal(date);\n      onValueChange?.(date);\n      setOpen(false);\n    };\n\n    return (\n      <div ref={rootRef} className={cn(\"relative inline-block\", className)} {...rest}>\n        <button\n          ref={ref}\n          type=\"button\"\n          disabled={disabled}\n          aria-label={ariaLabel ?? label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          onClick={() => setOpen((o) => !o)}\n          className={cn(\n            \"flex h-14 w-64 items-center justify-between gap-2 rounded-md-xs border border-md-outline bg-transparent px-4 text-left text-base text-md-on-surface outline-none focus-visible:border-md-primary\",\n            \"disabled:pointer-events-none disabled:opacity-[0.38]\",\n          )}\n        >\n          <span className={cn(\"flex flex-col\", !selected && \"justify-center\")}>\n            <span className=\"text-xs text-md-on-surface-variant\">{label}</span>\n            {selected && <span>{formatDate(selected)}</span>}\n          </span>\n          <CalendarDays aria-hidden className=\"h-5 w-5 shrink-0 text-md-on-surface-variant\" />\n        </button>\n\n        {open && (\n          <div\n            role=\"dialog\"\n            aria-label=\"Choose date\"\n            className=\"absolute z-50 mt-2 animate-nx-fade-in rounded-md-md bg-md-surface-container-high p-2 shadow-md-3\"\n          >\n            <Calendar mode=\"single\" selected={selected} onSelect={choose} classNames={md3CalendarClassNames} initialFocus />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nMd3DatePicker.displayName = \"Md3DatePicker\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface Md3DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+/** A Material Design 3 date picker: an outlined field that opens a calendar. */
+declare const Md3DatePicker: React.ForwardRefExoticComponent<Md3DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Md3DatePicker, type Md3DatePickerProps };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface Md3DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+/** A Material Design 3 date picker: an outlined field that opens a calendar. */
+declare const Md3DatePicker: React.ForwardRefExoticComponent<Md3DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Md3DatePicker, type Md3DatePickerProps };

package/dist/index.js

@@ -0,0 +1,84 @@
+"use client";
+import * as React from 'react';
+import { CalendarDays } from 'lucide-react';
+import { Calendar } from '@nucleux/calendar';
+import { cn } from '@nucleux/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var formatDate = (d) => d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+var md3CalendarClassNames = {
+  caption_label: "text-sm font-medium text-md-on-surface",
+  nav_button: "inline-flex h-8 w-8 items-center justify-center rounded-full text-md-on-surface-variant hover:bg-md-on-surface/[0.08]",
+  head_cell: "w-9 text-xs font-normal text-md-on-surface-variant",
+  day: "inline-flex h-9 w-9 items-center justify-center rounded-full text-sm text-md-on-surface hover:bg-md-on-surface/[0.08]",
+  day_selected: "bg-md-primary text-md-on-primary hover:bg-md-primary",
+  day_today: "border border-md-primary",
+  day_outside: "text-md-on-surface-variant opacity-40"
+};
+var Md3DatePicker = React.forwardRef(
+  ({ value, defaultValue, onValueChange, label = "Date", disabled = false, className, "aria-label": ariaLabel, ...rest }, ref) => {
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = React.useState(defaultValue);
+    const selected = isControlled ? value : internal;
+    const [open, setOpen] = React.useState(false);
+    const rootRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        if (!rootRef.current?.contains(e.target)) setOpen(false);
+      };
+      const onKey = (e) => e.key === "Escape" && setOpen(false);
+      document.addEventListener("mousedown", onDown);
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("mousedown", onDown);
+        document.removeEventListener("keydown", onKey);
+      };
+    }, [open]);
+    const choose = (date) => {
+      if (!isControlled) setInternal(date);
+      onValueChange?.(date);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative inline-block", className), ...rest, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          disabled,
+          "aria-label": ariaLabel ?? label,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          onClick: () => setOpen((o) => !o),
+          className: cn(
+            "flex h-14 w-64 items-center justify-between gap-2 rounded-md-xs border border-md-outline bg-transparent px-4 text-left text-base text-md-on-surface outline-none focus-visible:border-md-primary",
+            "disabled:pointer-events-none disabled:opacity-[0.38]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: cn("flex flex-col", !selected && "justify-center"), children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-md-on-surface-variant", children: label }),
+              selected && /* @__PURE__ */ jsx("span", { children: formatDate(selected) })
+            ] }),
+            /* @__PURE__ */ jsx(CalendarDays, { "aria-hidden": true, className: "h-5 w-5 shrink-0 text-md-on-surface-variant" })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-label": "Choose date",
+          className: "absolute z-50 mt-2 animate-nx-fade-in rounded-md-md bg-md-surface-container-high p-2 shadow-md-3",
+          children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected, onSelect: choose, classNames: md3CalendarClassNames, initialFocus: true })
+        }
+      )
+    ] });
+  }
+);
+Md3DatePicker.displayName = "Md3DatePicker";
+
+export { Md3DatePicker };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { CalendarDays } from \"lucide-react\";\nimport { Calendar } from \"@nucleux/calendar\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface Md3DatePickerProps {\n  value?: Date;\n  defaultValue?: Date;\n  onValueChange?: (date: Date | undefined) => void;\n  label?: string;\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n}\n\nconst formatDate = (d: Date) =>\n  d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n\n// Material 3 restyle of the react-day-picker grid.\nconst md3CalendarClassNames = {\n  caption_label: \"text-sm font-medium text-md-on-surface\",\n  nav_button:\n    \"inline-flex h-8 w-8 items-center justify-center rounded-full text-md-on-surface-variant hover:bg-md-on-surface/[0.08]\",\n  head_cell: \"w-9 text-xs font-normal text-md-on-surface-variant\",\n  day: \"inline-flex h-9 w-9 items-center justify-center rounded-full text-sm text-md-on-surface hover:bg-md-on-surface/[0.08]\",\n  day_selected: \"bg-md-primary text-md-on-primary hover:bg-md-primary\",\n  day_today: \"border border-md-primary\",\n  day_outside: \"text-md-on-surface-variant opacity-40\",\n} as const;\n\n/** A Material Design 3 date picker: an outlined field that opens a calendar. */\nexport const Md3DatePicker = React.forwardRef<HTMLButtonElement, Md3DatePickerProps>(\n  ({ value, defaultValue, onValueChange, label = \"Date\", disabled = false, className, \"aria-label\": ariaLabel, ...rest }, ref) => {\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = React.useState<Date | undefined>(defaultValue);\n    const selected = isControlled ? value : internal;\n    const [open, setOpen] = React.useState(false);\n    const rootRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n      if (!open) return;\n      const onDown = (e: MouseEvent) => {\n        if (!rootRef.current?.contains(e.target as Node)) setOpen(false);\n      };\n      const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpen(false);\n      document.addEventListener(\"mousedown\", onDown);\n      document.addEventListener(\"keydown\", onKey);\n      return () => {\n        document.removeEventListener(\"mousedown\", onDown);\n        document.removeEventListener(\"keydown\", onKey);\n      };\n    }, [open]);\n\n    const choose = (date: Date | undefined) => {\n      if (!isControlled) setInternal(date);\n      onValueChange?.(date);\n      setOpen(false);\n    };\n\n    return (\n      <div ref={rootRef} className={cn(\"relative inline-block\", className)} {...rest}>\n        <button\n          ref={ref}\n          type=\"button\"\n          disabled={disabled}\n          aria-label={ariaLabel ?? label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          onClick={() => setOpen((o) => !o)}\n          className={cn(\n            \"flex h-14 w-64 items-center justify-between gap-2 rounded-md-xs border border-md-outline bg-transparent px-4 text-left text-base text-md-on-surface outline-none focus-visible:border-md-primary\",\n            \"disabled:pointer-events-none disabled:opacity-[0.38]\",\n          )}\n        >\n          <span className={cn(\"flex flex-col\", !selected && \"justify-center\")}>\n            <span className=\"text-xs text-md-on-surface-variant\">{label}</span>\n            {selected && <span>{formatDate(selected)}</span>}\n          </span>\n          <CalendarDays aria-hidden className=\"h-5 w-5 shrink-0 text-md-on-surface-variant\" />\n        </button>\n\n        {open && (\n          <div\n            role=\"dialog\"\n            aria-label=\"Choose date\"\n            className=\"absolute z-50 mt-2 animate-nx-fade-in rounded-md-md bg-md-surface-container-high p-2 shadow-md-3\"\n          >\n            <Calendar mode=\"single\" selected={selected} onSelect={choose} classNames={md3CalendarClassNames} initialFocus />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nMd3DatePicker.displayName = \"Md3DatePicker\";\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@nucleux/md3-date-picker",
+  "version": "0.4.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Material 3 date picker — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "md3-date-picker"
+  ],
+  "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",
+    "@nucleux/utils": "0.4.0",
+    "@nucleux/calendar": "0.4.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/md3-date-picker"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}