@lit-material/calendar 0.0.0-stage → 1.0.0

package/dist/web-types.json

@@ -0,0 +1,168 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@lit-material/calendar",
+  "version": "1.0.0",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "lit-material-calendar",
+          "description": "Material Design 3 styled calendar and scheduler: a month grid, week and day time grids, and an agenda list, with a toolbar (previous / today / next, the period's title, and a view switch). Events are controlled: the element never moves an event itself. Dragging, resizing or Alt+arrow keys fire a cancelable `event-change` with the new times; update `events` to accept it. Times are in the browser's (or server's) local time zone. ISO strings without an offset are read as local wall-clock time; date-only strings are local days. `slot-click` and `event-change` hand back local `Date`s. The month view is an ARIA grid of days. The week and day views are one ARIA grid too: a header row of days, an \"All day\" row, then a row per time slot, each with a time row header. One cell is in the tab order (arrow keys move it); Tab goes on to the events in that cell, each a button named by its title and time.",
+          "doc-url": "https://lit.rws8.tech/components/calendar/",
+          "attributes": [
+            {
+              "name": "view",
+              "description": "Which view is shown.",
+              "value": {
+                "type": "CalendarView"
+              }
+            },
+            {
+              "name": "date",
+              "description": "The day in focus, as an ISO `\"YYYY-MM-DD\"` string; the view shows the month, week or day around it. Default: today.",
+              "value": {
+                "type": "string | undefined"
+              }
+            },
+            {
+              "name": "events",
+              "description": "The events: `{ id, title, start, end?, allDay?, color?, editable?, ...data }`. Property or JSON attribute.",
+              "value": {
+                "type": "CalendarEvent[]"
+              }
+            },
+            {
+              "name": "first-day-of-week",
+              "description": "0 = Sunday, 1 = Monday, ... Default: the first day of the week in the element's language, else Sunday.",
+              "value": {
+                "type": "number | undefined"
+              }
+            },
+            {
+              "name": "slot-minutes",
+              "description": "Minutes per row of the week and day views; also the step for keyboard moves.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "scroll-to-hour",
+              "description": "The hour the week and day views scroll to when they open.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "day-max-events",
+              "description": "Event rows per day in the month view before \"+N more\".",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "agenda-days",
+              "description": "Days the agenda view lists, from `date`.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "readonly",
+              "description": "No dragging, resizing or keyboard moves (clicks still fire).",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [
+            {
+              "name": "navigate",
+              "description": "`detail: { view, date, start, end }` when the toolbar, keyboard or a \"+N more\" link changes the view or the period shown."
+            },
+            {
+              "name": "slot-click",
+              "description": "`detail: { start, end, allDay }` when an empty day, all-day cell or time slot is clicked or activated, or a time range is dragged out (pointer) or extended with Shift+arrows."
+            },
+            {
+              "name": "event-click",
+              "description": "`detail: { event }` when an event is clicked or activated with Enter/Space."
+            },
+            {
+              "name": "event-change",
+              "description": "Cancelable. `detail: { event, start, end, allDay }` when an event is dragged, resized or moved with the keyboard. The app updates `events`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "agendaDays",
+                "description": "Days the agenda view lists, from `date`.",
+                "type": "number"
+              },
+              {
+                "name": "date",
+                "description": "The day in focus, as an ISO `\"YYYY-MM-DD\"` string; the view shows the month, week or day around it. Default: today.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "dayMaxEvents",
+                "description": "Event rows per day in the month view before \"+N more\".",
+                "type": "number"
+              },
+              {
+                "name": "events",
+                "description": "The events: `{ id, title, start, end?, allDay?, color?, editable?, ...data }`. Property or JSON attribute.",
+                "type": "CalendarEvent[]"
+              },
+              {
+                "name": "firstDayOfWeek",
+                "description": "0 = Sunday, 1 = Monday, ... Default: the first day of the week in the element's language, else Sunday.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "readonly",
+                "description": "No dragging, resizing or keyboard moves (clicks still fire).",
+                "type": "boolean"
+              },
+              {
+                "name": "scrollToHour",
+                "description": "The hour the week and day views scroll to when they open.",
+                "type": "number"
+              },
+              {
+                "name": "slotMinutes",
+                "description": "Minutes per row of the week and day views; also the step for keyboard moves.",
+                "type": "number"
+              },
+              {
+                "name": "view",
+                "description": "Which view is shown.",
+                "type": "CalendarView"
+              }
+            ],
+            "events": [
+              {
+                "name": "navigate",
+                "description": "`detail: { view, date, start, end }` when the toolbar, keyboard or a \"+N more\" link changes the view or the period shown."
+              },
+              {
+                "name": "slot-click",
+                "description": "`detail: { start, end, allDay }` when an empty day, all-day cell or time slot is clicked or activated, or a time range is dragged out (pointer) or extended with Shift+arrows."
+              },
+              {
+                "name": "event-click",
+                "description": "`detail: { event }` when an event is clicked or activated with Enter/Space."
+              },
+              {
+                "name": "event-change",
+                "description": "Cancelable. `detail: { event, start, end, allDay }` when an event is dragged, resized or moved with the keyboard. The app updates `events`."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,100 @@
 {
   "name": "@lit-material/calendar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Material Design 3 styled calendar and scheduler web component: month, week, day and agenda views with drag, resize and keyboard moves.",
+  "license": "MIT",
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://lit.rws8.tech/components/calendar/",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/calendar"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "calendar",
+    "scheduler",
+    "agenda",
+    "events"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./calendar.js": {
+      "types": "./dist/calendar.d.ts",
+      "default": "./dist/calendar.js"
+    },
+    "./calendar-utils.js": {
+      "types": "./dist/calendar-utils.d.ts",
+      "default": "./dist/calendar-utils.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./jsx": {
+      "types": "./types/jsx.d.ts"
+    },
+    "./vue": {
+      "types": "./types/vue.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "custom-elements.json",
+    "types"
+  ],
+  "web-types": "./dist/web-types.json",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "@lit-material/core": "1.0.0",
+    "@lit-material/segmented-button": "1.0.0",
+    "@lit-material/tokens": "1.0.0"
+  },
+  "peerDependencies": {
+    "@lit/react": "^1.0.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@lit-labs/ssr": "^3.3.1",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^1.0.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
+  }
 }

package/types/jsx.d.ts

@@ -0,0 +1,21 @@
+// Generated by tools/framework-bindings.mjs from custom-elements.json. Do not edit.
+// React 19 renders custom elements natively; this types them in JSX. Load it with
+// `import type {} from "<package>/jsx";`. React 19 adds a listener for `on<event>` props as written.
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { LitMaterialCalendar } from "../dist/calendar.js";
+
+type ElementProps<E, K extends keyof E> = Omit<DetailedHTMLProps<HTMLAttributes<E>, E>, K> & Partial<Pick<E, K>>;
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /** Material Design 3 styled calendar and scheduler: a month grid, week and day time grids, and an agenda list, with a toolbar (previous / today / next, the period's title, and a view switch). Events are controlled: the element never moves an event itself. Dragging, resizing or Alt+arrow keys fire a cancelable `event-change` with the new times; update `events` to accept it. Times are in the browser's (or server's) local time zone. ISO strings without an offset are read as local wall-clock time; date-only strings are local days. `slot-click` and `event-change` hand back local `Date`s. The month view is an ARIA grid of days. The week and day views are one ARIA grid too: a header row of days, an "All day" row, then a row per time slot, each with a time row header. One cell is in the tab order (arrow keys move it); Tab goes on to the events in that cell, each a button named by its title and time. */
+      "lit-material-calendar": ElementProps<LitMaterialCalendar, "agendaDays" | "date" | "dayMaxEvents" | "events" | "firstDayOfWeek" | "readonly" | "scrollToHour" | "slotMinutes" | "view"> & {
+        "onnavigate"?: (event: CustomEvent) => void;
+        "onslot-click"?: (event: CustomEvent) => void;
+        "onevent-click"?: (event: CustomEvent) => void;
+        "onevent-change"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/types/vue.d.ts

@@ -0,0 +1,17 @@
+// Generated by tools/framework-bindings.mjs from custom-elements.json. Do not edit.
+// Types the elements in Vue templates (Volar). Load it with `import type {} from "<package>/vue";`, and
+// tell the compiler they're custom elements: compilerOptions.isCustomElement = (tag) => tag.startsWith("lit-material-").
+import type { DefineComponent } from "vue";
+import type { LitMaterialCalendar } from "../dist/calendar.js";
+
+declare module "vue" {
+  interface GlobalComponents {
+    /** Material Design 3 styled calendar and scheduler: a month grid, week and day time grids, and an agenda list, with a toolbar (previous / today / next, the period's title, and a view switch). Events are controlled: the element never moves an event itself. Dragging, resizing or Alt+arrow keys fire a cancelable `event-change` with the new times; update `events` to accept it. Times are in the browser's (or server's) local time zone. ISO strings without an offset are read as local wall-clock time; date-only strings are local days. `slot-click` and `event-change` hand back local `Date`s. The month view is an ARIA grid of days. The week and day views are one ARIA grid too: a header row of days, an "All day" row, then a row per time slot, each with a time row header. One cell is in the tab order (arrow keys move it); Tab goes on to the events in that cell, each a button named by its title and time. */
+    "lit-material-calendar": DefineComponent<Partial<Pick<LitMaterialCalendar, "agendaDays" | "date" | "dayMaxEvents" | "events" | "firstDayOfWeek" | "readonly" | "scrollToHour" | "slotMinutes" | "view">> & {
+        onNavigate?: (event: CustomEvent) => void;
+        onSlotClick?: (event: CustomEvent) => void;
+        onEventClick?: (event: CustomEvent) => void;
+        onEventChange?: (event: CustomEvent) => void;
+      }>;
+  }
+}