@kalyx/react 0.4.0 → 1.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,137 @@
1
1
  # @kalyx/react
2
2
 
3
+ ## 1.0.0-rc.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 3afb15b: Fix popover styling regression that broke documentation live previews.
8
+ - `DatePicker.Popover` and `RangePicker.Popover` now merge user-provided `style` props _under_ Floating UI's positioning instead of being overwritten by it. Previously, passing `style={{...}}` to a Popover stripped away `position: absolute`, `top`, `left`, and `transform`, causing the popover to render as a static block at full container width.
9
+ - The popover is now hidden until Floating UI computes its position, eliminating an unpositioned first-frame flash on every open.
10
+ - The shared `usePopover` hook also wires the floating element's reference synchronously in the ref callback, so positioning is resolved before paint in most cases.
11
+
12
+ ## 1.0.0-rc.0
13
+
14
+ ### Major Changes
15
+
16
+ - ca7180e: chore: v1.0 milestone — API freeze.
17
+
18
+ Kalyx v1.0 declares the public API stable. This is a milestone release bundling the v0.5 surface additions (MonthPicker, YearPicker, WeekPicker, DatePicker.Presets, `onOpenChange`/`onCalendarNavigate` event callbacks) with an explicit commitment to semantic versioning going forward.
19
+
20
+ ### What v1.0 commits to
21
+ - **Public API surface** — exports from `@kalyx/react` and `@kalyx/core` listed in their `index.ts` files. Any breaking change requires a major bump.
22
+ - **Compositional structure** — Root + subcomponent names (`DatePicker.Input`, `DatePicker.Calendar`, …) are stable. Removal or renaming requires a major bump.
23
+ - **Value semantics** — ISO 8601 UTC strings for single dates, `DateRange` `{start, end}` for ranges. `displayTimezone` behavior (civil-midnight-in-tz for date selection) is stable.
24
+ - **Accessibility contracts** — role/aria-\* attributes emitted by each component are stable.
25
+
26
+ ### What v1.0 does NOT freeze
27
+ - Internal implementation details (non-exported functions, component file layout).
28
+ - CSS class name strings on elements — no classes are applied by default; only when a consumer passes them via `classNames` props.
29
+ - Error message text.
30
+ - Peer dependency version ranges (may expand to cover new React majors).
31
+
32
+ ### Breaking changes vs 0.4.x
33
+
34
+ None. v1.0 is API-compatible with 0.4.x — existing code continues to work. The major bump communicates stability commitment, not breakage.
35
+
36
+ ### Minor Changes
37
+
38
+ - 3db8444: feat: add `DatePicker.Presets` and `DatePicker.Preset` for single-date quick selection.
39
+
40
+ Mirrors the existing `RangePicker.Presets` API. Pass a predefined `value` key (`today`, `tomorrow`, `yesterday`, `startOfMonth`, `endOfMonth`, `startOfYear`) or a direct ISO via `date`.
41
+
42
+ ```tsx
43
+ <DatePicker value={date} onChange={setDate}>
44
+ <DatePicker.Input />
45
+ <DatePicker.Popover>
46
+ <DatePicker.Presets>
47
+ <DatePicker.Preset value="today">Today</DatePicker.Preset>
48
+ <DatePicker.Preset value="tomorrow">Tomorrow</DatePicker.Preset>
49
+ <DatePicker.Preset date="2026-12-25T00:00:00.000Z">Christmas</DatePicker.Preset>
50
+ </DatePicker.Presets>
51
+ <DatePicker.Calendar />
52
+ </DatePicker.Popover>
53
+ </DatePicker>
54
+ ```
55
+
56
+ - Active preset is marked `aria-selected="true"` when its resolved date matches the current value (timezone-aware).
57
+ - Clicking a preset commits and closes the popover.
58
+ - `displayTimezone` is honored when resolving "today"-relative presets.
59
+
60
+ - 56e1ce9: feat: add `onOpenChange` and `onCalendarNavigate` callbacks on `DatePicker`, `RangePicker`, and `DateTimePicker` Root components.
61
+ - `onOpenChange(isOpen: boolean)` fires whenever the popover opens or closes (regardless of trigger — click, keyboard, outside click, selection).
62
+ - `onCalendarNavigate(viewMonth: ISODateString)` fires when the calendar view moves to a different month. The emitted value is the first day of the newly-visible month in UTC.
63
+
64
+ Neither callback fires on initial mount. `TimePicker` does not expose these callbacks since it has no popover or calendar.
65
+
66
+ - 6fc7c59: feat: add `MonthPicker` — a headless month selector.
67
+
68
+ `MonthPicker` stores the selected month as the first day of that month in UTC-ISO form (e.g., `"2026-04-01T00:00:00.000Z"`). It reuses `DatePicker` infrastructure (Input, Trigger, Popover), so the only new primitive is `MonthPicker.Grid`, a 12-month commit grid with year navigation.
69
+
70
+ ```tsx
71
+ <MonthPicker value={month} onChange={setMonth}>
72
+ <MonthPicker.Input placeholder="Pick a month" />
73
+ <MonthPicker.Popover>
74
+ <MonthPicker.Grid />
75
+ </MonthPicker.Popover>
76
+ </MonthPicker>
77
+ ```
78
+
79
+ - Default `displayFormat` is `"yyyy-MM"`.
80
+ - `displayTimezone` is supported (commits map to civil midnight of month-start in the target zone).
81
+ - Month selection highlighting is timezone-aware — the grid reflects the month of the current value even when stored in zone-adjusted UTC form.
82
+ - Primary UX is click-to-select; full `yyyy-MM-dd` typed input still works via the inherited Input behavior.
83
+
84
+ - 6fdf8fe: feat: add `WeekPicker` — a headless week selector.
85
+
86
+ `WeekPicker` stores the selected week as a `DateRange` covering all seven days (based on `weekStartsOn`). Unlike `RangePicker`, a single click on any day selects the entire week containing that day.
87
+
88
+ ```tsx
89
+ <WeekPicker value={week} onChange={setWeek} weekStartsOn={1}>
90
+ <WeekPicker.Input part="start" />
91
+ <WeekPicker.Input part="end" />
92
+ <WeekPicker.Popover>
93
+ <WeekPicker.Calendar />
94
+ </WeekPicker.Popover>
95
+ </WeekPicker>
96
+ ```
97
+
98
+ - Reuses `RangePicker` Root / Input / Popover; only `WeekPicker.Calendar` is new.
99
+ - `weekStartsOn` (0=Sunday, 1=Monday) controls which seven days constitute a week.
100
+ - Enter / Space on the focused day commits the full week containing it.
101
+ - `displayTimezone`, `disabled` rules, and all other RangePicker props are supported.
102
+
103
+ - 6fc7c59: feat: add `YearPicker` — a headless year selector.
104
+
105
+ `YearPicker` stores the selected year as Jan 1 of that year in UTC-ISO form (e.g., `"2026-01-01T00:00:00.000Z"`). It reuses `DatePicker` infrastructure (Input, Trigger, Popover) and exposes `YearPicker.Grid`, a 12-year decade commit grid with decade navigation.
106
+
107
+ ```tsx
108
+ <YearPicker value={year} onChange={setYear}>
109
+ <YearPicker.Input placeholder="Pick a year" />
110
+ <YearPicker.Popover>
111
+ <YearPicker.Grid />
112
+ </YearPicker.Popover>
113
+ </YearPicker>
114
+ ```
115
+
116
+ - Default `displayFormat` is `"yyyy"`.
117
+ - `displayTimezone` is supported with timezone-aware year highlighting.
118
+ - Primary UX is click-to-select; full `yyyy-MM-dd` typed input still works via the inherited Input behavior.
119
+
120
+ ### Patch Changes
121
+
122
+ - 1ca818c: fix(react): prevent WeekPicker from mutating RangePicker.Calendar
123
+
124
+ `WeekPicker` previously called `Object.assign(RangePickerRoot, { ..., Calendar: WeekPickerCalendar })`, which mutates the shared `RangePickerRoot` function object. Because `RangePicker.Calendar` is attached to the same object (via the earlier `Object.assign` in `RangePicker/index.ts`), importing `WeekPicker` would overwrite `RangePicker.Calendar` with `WeekPickerCalendar`.
125
+
126
+ Users of `RangePicker` would then see week-selection behavior (single click commits a full week and closes the popover) instead of the documented two-click range flow — even without importing `WeekPicker` directly, because both pickers share the module graph.
127
+
128
+ Added an internal `WeekPickerRoot` wrapper that the `Object.assign` target now uses, preserving `RangePickerRoot.Calendar` intact.
129
+
130
+ Caught by the `RangePicker › select range in start-date -> end-date order` Playwright test; all existing behavior is restored.
131
+
132
+ - Updated dependencies [ca7180e]
133
+ - @kalyx/core@1.0.0-rc.0
134
+
3
135
  ## 0.4.0
4
136
 
5
137
  ### Minor Changes
@@ -11,7 +143,6 @@
11
143
  When set, the value stored via `onChange` is the **civil midnight of the selected day in the target timezone** (in UTC-ISO form), eliminating the classic "day off by one" bug that affects picker libraries bound to `new Date()`. Input formatting, calendar highlighting, and the time-of-day controls all follow the display timezone — including DST-aware offsets for zones like `America/New_York` and `Europe/London`.
12
144
 
13
145
  `DateFnsAdapter` now honors the `timezone` argument on `format`, `isSameDay`, `startOfDay`, and `today` (previously declared-but-ignored). Core also exposes new helpers:
14
-
15
146
  - `civilMidnightFromUtcDay(iso, tz)`
16
147
  - `getTimeInTimezone(iso, tz)`
17
148
  - `setTimeInTimezone(iso, partial, tz)`
@@ -29,7 +160,6 @@
29
160
  ### Minor Changes
30
161
 
31
162
  - 669391b: Improve code quality, performance, and stability
32
-
33
163
  - Enforce UTC timezone suffix in ISO regex
34
164
  - Extract shared usePopover and useListboxNavigation hooks
35
165
  - Add Intl.DateTimeFormat caching for locale/timezone utilities
@@ -68,7 +198,6 @@
68
198
  - e9bb9e8: Initial release of Kalyx — headless, SSR-safe React DatePicker library.
69
199
 
70
200
  Features:
71
-
72
201
  - DatePicker: single date selection with Calendar, Input, Trigger, Popover
73
202
  - RangePicker: date range selection with auto-swap and hover preview
74
203
  - TimePicker: 12h/24h mode, minute step, HourList/MinuteList/AmPmToggle
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  > The headless React DatePicker, finally complete. Zero CSS · SSR-safe · under 12 KB gzip.
4
4
 
5
5
  [![npm](https://img.shields.io/npm/v/@kalyx/react?color=5b4fe1)](https://www.npmjs.com/package/@kalyx/react)
6
- [![Bundle](https://img.shields.io/badge/gzip-9.2KB-brightgreen)](https://kalyx-docs.vercel.app/docs/api/react#bundle-size)
6
+ [![Bundle](https://img.shields.io/badge/gzip-11.36KB-brightgreen)](https://kalyx-docs.vercel.app/docs/api/react#bundle-size)
7
7
  [![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue)](https://www.typescriptlang.org/)
8
8
  [![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/jiji-hoon96/kalyx/blob/main/LICENSE)
9
9
 
@@ -51,6 +51,9 @@ import {
51
51
  RangePicker, // date range + presets
52
52
  TimePicker, // hour + minute (+ seconds)
53
53
  DateTimePicker, // date + time combined
54
+ MonthPicker, // month-only selection
55
+ YearPicker, // year-only selection
56
+ WeekPicker, // full-week range selection
54
57
  useDatePicker, // hook for custom UIs
55
58
  useRangePicker,
56
59
  useTimePicker,
@@ -90,6 +93,8 @@ Full recipes: [Tailwind](https://kalyx-docs.vercel.app/docs/recipes/tailwind), [
90
93
  - [Quick Start](https://kalyx-docs.vercel.app/docs/getting-started/quick-start)
91
94
  - [Components](https://kalyx-docs.vercel.app/docs/components/datepicker)
92
95
  - [Hooks](https://kalyx-docs.vercel.app/docs/hooks/use-date-picker)
96
+ - [Testing](https://kalyx-docs.vercel.app/docs/recipes/testing)
97
+ - [Troubleshooting](https://kalyx-docs.vercel.app/docs/troubleshooting)
93
98
  - [Migration from react-datepicker / react-day-picker / React Aria](https://kalyx-docs.vercel.app/docs/migration)
94
99
 
95
100
  ## License