@c2n/date-selector 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/date-selector.ts","declarations":[{"kind":"class","description":"A keyboard-accessible date-range calendar inspired by travel booking pickers. It shows one or two consecutive\nmonths, starts a range on the first activation, completes it on the second, and starts over on the third. Dates are\nlocal-calendar ISO strings (`YYYY-MM-DD`), so they do not shift across time zones. Arrow keys move by day or week,\nHome/End move within the week, and Page Up/Page Down change month.\n\nWhen `name` is present, the start date is submitted under that name and the end date under `end-name` (or\n`${name}-end`). `required` requires a complete range. Use `min` and `max` to constrain availability.","name":"DateSelector","cssProperties":[{"type":{"text":"color"},"name":"--c2-date-selector--background","default":"#ffffff"},{"type":{"text":"color"},"name":"--c2-date-selector--color","default":"#18181b"},{"type":{"text":"border"},"name":"--c2-date-selector--border","default":"1px solid #e4e4e7"},{"type":{"text":"border-radius"},"name":"--c2-date-selector--border-radius","default":"14px"},{"type":{"text":"box-shadow"},"name":"--c2-date-selector--box-shadow","default":"0 12px 32px rgba(24, 24, 27, 0.08)"},{"type":{"text":"pixel"},"description":"Prevents the seven day columns and container padding from collapsing.","name":"--c2-date-selector--min-width","default":"312px"},{"type":{"text":"padding"},"name":"--c2-date-selector--padding","default":"16px"},{"type":{"text":"pixel"},"name":"--c2-date-selector--month-gap","default":"40px"},{"type":{"text":"font-family"},"name":"--c2-date-selector--font-family","default":"inherit"},{"type":{"text":"font-size"},"name":"--c2-date-selector--font-size","default":"14px"},{"type":{"text":"pixel"},"name":"--c2-date-selector__day--size","default":"40px"},{"type":{"text":"border-radius"},"name":"--c2-date-selector__day--border-radius","default":"999px"},{"type":{"text":"color"},"name":"--c2-date-selector__day__hover--background","default":"#f4f4f5"},{"type":{"text":"color"},"name":"--c2-date-selector__day__today--color","default":"#0265dc"},{"type":{"text":"font-weight"},"name":"--c2-date-selector__day__today--font-weight","default":"600"},{"type":{"text":"color"},"name":"--c2-date-selector__day__selected--background","default":"#0265dc"},{"type":{"text":"color"},"name":"--c2-date-selector__day__selected--color","default":"#ffffff"},{"type":{"text":"color"},"name":"--c2-date-selector__range--background","default":"#edf1fe"},{"type":{"text":"color"},"name":"--c2-date-selector__range--color","default":"#18181b"},{"type":{"text":"opacity"},"name":"--c2-date-selector__day__disabled--opacity","default":"0.38"},{"type":{"text":"color"},"name":"--c2-date-selector__weekday--color","default":"#71717a"},{"type":{"text":"font-size"},"name":"--c2-date-selector__weekday--font-size","default":"12px"},{"type":{"text":"font-weight"},"name":"--c2-date-selector__month-title--font-weight","default":"600"},{"type":{"text":"pixel"},"name":"--c2-date-selector__navigation--size","default":"32px"},{"type":{"text":"color"},"name":"--c2-date-selector__navigation__hover--background","default":"#f4f4f5"},{"type":{"text":"outline"},"name":"--c2-date-selector__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"},{"type":{"text":"pixel"},"name":"--c2-date-selector__focus--outline-offset","default":"2px"},{"type":{"text":"opacity"},"name":"--c2-date-selector__disabled--opacity","default":"0.38"}],"members":[{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"default":"true"},{"kind":"field","name":"internals","privacy":"private","readonly":true},{"kind":"field","name":"defaultsCaptured","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"defaultFrom","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"defaultTo","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"disabledByForm","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"visibleMonth","privacy":"private"},{"kind":"field","name":"focusDate","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"dayButtons","type":{"text":"NodeListOf<HTMLButtonElement>"},"privacy":"private","readonly":true},{"kind":"field","name":"from","type":{"text":"string"},"default":"''","description":"Start of the selected range as `YYYY-MM-DD`.","attribute":"from","reflects":true},{"kind":"field","name":"to","type":{"text":"string"},"default":"''","description":"End of the selected range as `YYYY-MM-DD`; empty while the range is incomplete.","attribute":"to","reflects":true},{"kind":"field","name":"min","type":{"text":"string"},"default":"''","description":"Earliest selectable date as `YYYY-MM-DD`.","attribute":"min"},{"kind":"field","name":"max","type":{"text":"string"},"default":"''","description":"Latest selectable date as `YYYY-MM-DD`.","attribute":"max"},{"kind":"field","name":"locale","type":{"text":"string"},"default":"''","description":"Locale used for month, weekday and accessible date labels. Defaults to the document language.","attribute":"locale"},{"kind":"field","name":"weekStart","type":{"text":"DateSelectorWeekStart"},"default":"'monday'","description":"First day of each calendar week.","attribute":"week-start","reflects":true},{"kind":"field","name":"months","type":{"text":"number"},"default":"2","description":"Number of consecutive months shown; clamped to one or two.","attribute":"months","reflects":true},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"Form field name for the start date.","attribute":"name"},{"kind":"field","name":"endName","type":{"text":"string"},"default":"''","description":"Form field name for the end date. Defaults to `${name}-end`.","attribute":"end-name"},{"kind":"field","name":"required","type":{"text":"boolean"},"default":"false","description":"Requires both endpoints when the selector participates in a form.","attribute":"required","reflects":true},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Prevents navigation and selection and excludes the control from form submission.","attribute":"disabled","reflects":true},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"'Choose a date range'","description":"Accessible name for the complete calendar.","attribute":"aria-label"},{"kind":"field","name":"form","readonly":true},{"kind":"field","name":"labels","readonly":true},{"kind":"field","name":"validity","readonly":true},{"kind":"field","name":"validationMessage","readonly":true},{"kind":"field","name":"willValidate","readonly":true},{"kind":"method","name":"checkValidity"},{"kind":"method","name":"reportValidity"},{"kind":"method","name":"formResetCallback"},{"kind":"method","name":"formDisabledCallback","parameters":[{"name":"disabled","type":{"text":"boolean"}}]},{"kind":"method","name":"formStateRestoreCallback","parameters":[{"name":"state","type":{"text":"string | File | FormData | null"}}]},{"kind":"field","name":"effectiveDisabled","privacy":"private","readonly":true},{"kind":"field","name":"effectiveLocale","privacy":"private","readonly":true},{"kind":"field","name":"displayedMonths","privacy":"private","readonly":true},{"kind":"method","name":"normalizeRange","privacy":"private"},{"kind":"method","name":"syncFormState","privacy":"private"},{"kind":"method","name":"isUnavailable","privacy":"private","parameters":[{"name":"value","type":{"text":"string"}}]},{"kind":"method","name":"select","privacy":"private","parameters":[{"name":"value","type":{"text":"string"}}]},{"kind":"method","name":"navigate","privacy":"private","parameters":[{"name":"amount","type":{"text":"number"}}]},{"kind":"method","name":"moveFocus","privacy":"private","parameters":[{"name":"current","type":{"text":"string"}},{"name":"offset","type":{"text":"number"}},{"name":"byMonth","default":"false"}]},{"kind":"method","name":"handleDayKeydown","privacy":"private","parameters":[{"name":"event","type":{"text":"KeyboardEvent"}},{"name":"value","type":{"text":"string"}},{"name":"column","type":{"text":"number"}}]},{"kind":"method","name":"weekdayLabels","privacy":"private"},{"kind":"method","name":"renderDay","privacy":"private","parameters":[{"name":"date","type":{"text":"Date"}},{"name":"column","type":{"text":"number"}},{"name":"dateLabel","type":{"text":"Intl.DateTimeFormat"}},{"name":"today","type":{"text":"string"}}]},{"kind":"method","name":"renderMonth","privacy":"private","parameters":[{"name":"month","type":{"text":"Date"}},{"name":"index","type":{"text":"number"}}]}],"events":[{"name":"input","type":{"text":"Event"},"description":"Fired after either endpoint changes, with `from` and `to` already updated."},{"name":"change","type":{"text":"CustomEvent<DateRangeChangeDetail>"},"description":"Fired with `input`; `detail` contains the ISO `from` and `to` values."}],"attributes":[{"name":"from","type":{"text":"string"},"default":"''","description":"Start of the selected range as `YYYY-MM-DD`.","fieldName":"from"},{"name":"to","type":{"text":"string"},"default":"''","description":"End of the selected range as `YYYY-MM-DD`; empty while the range is incomplete.","fieldName":"to"},{"name":"min","type":{"text":"string"},"default":"''","description":"Earliest selectable date as `YYYY-MM-DD`.","fieldName":"min"},{"name":"max","type":{"text":"string"},"default":"''","description":"Latest selectable date as `YYYY-MM-DD`.","fieldName":"max"},{"name":"locale","type":{"text":"string"},"default":"''","description":"Locale used for month, weekday and accessible date labels. Defaults to the document language.","fieldName":"locale"},{"name":"week-start","type":{"text":"DateSelectorWeekStart"},"default":"'monday'","description":"First day of each calendar week.","fieldName":"weekStart"},{"name":"months","type":{"text":"number"},"default":"2","description":"Number of consecutive months shown; clamped to one or two.","fieldName":"months"},{"name":"name","type":{"text":"string"},"default":"''","description":"Form field name for the start date.","fieldName":"name"},{"name":"end-name","type":{"text":"string"},"default":"''","description":"Form field name for the end date. Defaults to `${name}-end`.","fieldName":"endName"},{"name":"required","type":{"text":"boolean"},"default":"false","description":"Requires both endpoints when the selector participates in a form.","fieldName":"required"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Prevents navigation and selection and excludes the control from form submission.","fieldName":"disabled"},{"name":"aria-label","type":{"text":"string | null"},"default":"'Choose a date range'","description":"Accessible name for the complete calendar.","fieldName":"ariaLabel"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-date-selector","customElement":true}],"exports":[{"kind":"js","name":"DateSelector","declaration":{"name":"DateSelector","module":"src/date-selector.ts"}},{"kind":"custom-element-definition","name":"c2-date-selector","declaration":{"name":"DateSelector","module":"src/date-selector.ts"}}]}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/date-selector",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/date-selector.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -62,12 +63,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.11",
+    "@c2n/core": "0.0.13",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+  "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
 }

package/react.d.ts

@@ -6,17 +6,27 @@
 //
 // Register the elements at module scope before React renders, or React writes an object prop as an
 // attribute and it stringifies.
+//
+// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
+// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
+// set properties. Those names are listed next to the properties below.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { DateSelector } from '@c2n/date-selector'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
+type Attribute = string | number | boolean
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'c2-date-selector': C2Props<DateSelector>
+      'c2-date-selector': C2Props<DateSelector> & {
+        'week-start'?: Attribute
+        'end-name'?: Attribute
+        'aria-label'?: Attribute
+      }
     }
   }
 }