@fluixi-ui/date-picker 0.3.0-alpha.18 → 0.3.0-alpha.20

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.
Files changed (5) hide show
  1. package/dist/date-picker.js +325 -220
  2. package/dist/date-range-picker.js +369 -256
  3. package/dist/index.js +3 -18
  4. package/dist/tsconfig.lib.tsbuildinfo +1 -1
  5. package/package.json +6 -6
package/dist/date-range-picker.js CHANGED
@@ -1,274 +1,387 @@
1
- import { createComponent, splitProps, mergeProps, createNativeElement, spread, insert, templateNode, handleRef, delegateEvents } from "@fluixi/dom";
2
- import { createSignal, untrack, createRenderEffect, createMemo, createEffect } from "@fluixi/reactive/signal";
1
+ import { createComponent, createNativeElement, delegateEvents, handleRef, insert, mergeProps, splitProps, spread, templateNode } from "@fluixi/dom";
2
+ import { createEffect, createMemo, createRenderEffect, createSignal, untrack } from "@fluixi/reactive/signal";
3
3
  import { fxProps } from "@fluixi-ui/fx";
4
- import { useRef, Show } from "@fluixi/core";
5
- import { createControllableSignal, createControllableBooleanSignal, createId, composeId, composeEventHandlers, createSafeContext } from "@fluixi-ui/kit";
6
- import { Portal, createFloatingPosition, createDismissableLayer, createFocusScope } from "@fluixi-ui/primitives";
4
+ import { Show, useRef } from "@fluixi/core";
5
+ import { composeEventHandlers, composeId, createControllableBooleanSignal, createControllableSignal, createId, createSafeContext } from "@fluixi-ui/kit";
6
+ import { Portal, createDismissableLayer, createFloatingPosition, createFocusScope } from "@fluixi-ui/primitives";
7
7
  import { DateField, DateInput } from "@fluixi-ui/date-field";
8
- import { RangeCalendar, CalendarHeader, CalendarPrevButton, CalendarHeading, CalendarNextButton, CalendarGrid } from "@fluixi-ui/calendar";
9
- const _fxTmpl$0 = '<span aria-hidden="true" data-date-range-separator="">–</span>';
10
- delegateEvents(["change", "keydown", "click"]);
11
- const [DateRangePickerProvider, useDateRangePickerContext] = createSafeContext("DateRangePicker");
8
+ import { CalendarGrid, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton, RangeCalendar } from "@fluixi-ui/calendar";
9
+ //#region src/date-range-picker.tsx
10
+ var _fxTmpl$0 = "<span aria-hidden=\"true\" data-date-range-separator=\"\">–</span>";
11
+ delegateEvents([
12
+ "change",
13
+ "keydown",
14
+ "click"
15
+ ]);
16
+ var [DateRangePickerProvider, useDateRangePickerContext] = createSafeContext("DateRangePicker");
17
+ /**
18
+ * A date range picker: two segmented fields (start / end) paired with a popover
19
+ * range calendar over one shared value. Partial entry is held per endpoint; the
20
+ * committed value stays `null` until both ends are set.
21
+ */
12
22
  function DateRangePicker(props) {
13
- const [value, setValue] = createControllableSignal({
14
- value: () => props.value ?? void 0,
15
- defaultValue: () => props.defaultValue ?? null,
16
- onChange: (v) => props.onChange?.(v)
17
- });
18
- const [isOpen, setOpen] = createControllableBooleanSignal({
19
- value: () => props.open,
20
- defaultValue: () => props.defaultOpen ?? false,
21
- onChange: (o) => props.onOpenChange?.(o)
22
- });
23
- const [start, setStart] = createSignal(untrack(() => value()?.start ?? null));
24
- const [end, setEnd] = createSignal(untrack(() => value()?.end ?? null));
25
- createRenderEffect(() => {
26
- const v = value();
27
- if (v) {
28
- setStart(v.start);
29
- setEnd(v.end);
30
- }
31
- });
32
- const commit = () => {
33
- const s = start();
34
- const e = end();
35
- setValue(s && e ? { start: s, end: e } : null);
36
- };
37
- const baseId = createId("date-range-picker");
38
- const [triggerRef, setTriggerRef] = createSignal(void 0);
39
- const ctx = {
40
- value: () => value() ?? null,
41
- start,
42
- end,
43
- setStart: (v) => {
44
- setStart(v);
45
- commit();
46
- },
47
- setEnd: (v) => {
48
- setEnd(v);
49
- commit();
50
- },
51
- selectRange: (range) => {
52
- setStart(range?.start ?? null);
53
- setEnd(range?.end ?? null);
54
- setValue(range);
55
- },
56
- isOpen,
57
- setOpen: (o) => setOpen(o),
58
- ids: { label: composeId(baseId, "label"), content: composeId(baseId, "content") },
59
- triggerRef,
60
- setTriggerRef,
61
- placement: props.placement ?? "bottom-start",
62
- offset: props.offset ?? 6,
63
- locale: () => props.locale,
64
- granularity: props.granularity,
65
- hourCycle: props.hourCycle,
66
- minValue: () => props.minValue,
67
- maxValue: () => props.maxValue,
68
- isDisabled: () => props.isDisabled ?? false,
69
- isReadOnly: () => props.isReadOnly ?? false,
70
- isDateUnavailable: props.isDateUnavailable
71
- };
72
- return createMemo(() => createComponent(DateRangePickerProvider, { get value() {
73
- return ctx;
74
- }, get children() {
75
- return props.children;
76
- } }));
23
+ const [value, setValue] = createControllableSignal({
24
+ value: () => props.value ?? void 0,
25
+ defaultValue: () => props.defaultValue ?? null,
26
+ onChange: (v) => props.onChange?.(v)
27
+ });
28
+ const [isOpen, setOpen] = createControllableBooleanSignal({
29
+ value: () => props.open,
30
+ defaultValue: () => props.defaultOpen ?? false,
31
+ onChange: (o) => props.onOpenChange?.(o)
32
+ });
33
+ const [start, setStart] = createSignal(untrack(() => value()?.start ?? null));
34
+ const [end, setEnd] = createSignal(untrack(() => value()?.end ?? null));
35
+ createRenderEffect(() => {
36
+ const v = value();
37
+ if (v) {
38
+ setStart(v.start);
39
+ setEnd(v.end);
40
+ }
41
+ });
42
+ const commit = () => {
43
+ const s = start();
44
+ const e = end();
45
+ setValue(s && e ? {
46
+ start: s,
47
+ end: e
48
+ } : null);
49
+ };
50
+ const baseId = createId("date-range-picker");
51
+ const [triggerRef, setTriggerRef] = createSignal(void 0);
52
+ const ctx = {
53
+ value: () => value() ?? null,
54
+ start,
55
+ end,
56
+ setStart: (v) => {
57
+ setStart(v);
58
+ commit();
59
+ },
60
+ setEnd: (v) => {
61
+ setEnd(v);
62
+ commit();
63
+ },
64
+ selectRange: (range) => {
65
+ setStart(range?.start ?? null);
66
+ setEnd(range?.end ?? null);
67
+ setValue(range);
68
+ },
69
+ isOpen,
70
+ setOpen: (o) => setOpen(o),
71
+ ids: {
72
+ label: composeId(baseId, "label"),
73
+ content: composeId(baseId, "content")
74
+ },
75
+ triggerRef,
76
+ setTriggerRef,
77
+ placement: props.placement ?? "bottom-start",
78
+ offset: props.offset ?? 6,
79
+ locale: () => props.locale,
80
+ granularity: props.granularity,
81
+ hourCycle: props.hourCycle,
82
+ minValue: () => props.minValue,
83
+ maxValue: () => props.maxValue,
84
+ isDisabled: () => props.isDisabled ?? false,
85
+ isReadOnly: () => props.isReadOnly ?? false,
86
+ isDateUnavailable: props.isDateUnavailable
87
+ };
88
+ return createMemo(() => createComponent(DateRangePickerProvider, {
89
+ get value() {
90
+ return ctx;
91
+ },
92
+ get children() {
93
+ return props.children;
94
+ }
95
+ }));
77
96
  }
97
+ /** Field label; linked to the range field group. */
78
98
  function DateRangePickerLabel(props) {
79
- const ctx = useDateRangePickerContext();
80
- const [local, others] = splitProps(props, ["children", "fx", "style"]);
81
- return (() => {
82
- const _el$ = createNativeElement("span");
83
- spread({ element: _el$, props: mergeProps(fxProps(
84
- () => local.fx,
85
- () => local.style
86
- ), others, { id: () => ctx.ids.label, "data-date-picker-label": "" }) });
87
- insert(_el$, local.children);
88
- return _el$;
89
- })();
99
+ const ctx = useDateRangePickerContext();
100
+ const [local, others] = splitProps(props, [
101
+ "children",
102
+ "fx",
103
+ "style"
104
+ ]);
105
+ return (() => {
106
+ const _el$ = createNativeElement("span");
107
+ spread({
108
+ element: _el$,
109
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
110
+ id: () => ctx.ids.label,
111
+ "data-date-picker-label": ""
112
+ })
113
+ });
114
+ insert(_el$, local.children, null);
115
+ return _el$;
116
+ })();
90
117
  }
118
+ /** Renders a controlled segmented field for one endpoint. */
91
119
  function EndpointField(props) {
92
- const ctx = useDateRangePickerContext();
93
- return createMemo(() => createComponent(DateField, { get value() {
94
- return props.value;
95
- }, get onChange() {
96
- return props.onChange;
97
- }, get locale() {
98
- return ctx.locale;
99
- }, get granularity() {
100
- return ctx.granularity;
101
- }, get hourCycle() {
102
- return ctx.hourCycle;
103
- }, get minValue() {
104
- return ctx.minValue;
105
- }, get maxValue() {
106
- return ctx.maxValue;
107
- }, get isDisabled() {
108
- return ctx.isDisabled;
109
- }, get isReadOnly() {
110
- return ctx.isReadOnly;
111
- }, get children() {
112
- return createMemo(() => createComponent(DateInput, { get "aria-labelledby"() {
113
- return ctx.ids.label;
114
- }, get "data-date-picker-input"() {
115
- return "";
116
- } }));
117
- } }));
120
+ const ctx = useDateRangePickerContext();
121
+ return createMemo(() => createComponent(DateField, {
122
+ get value() {
123
+ return props.value;
124
+ },
125
+ get onChange() {
126
+ return props.onChange;
127
+ },
128
+ get locale() {
129
+ return ctx.locale;
130
+ },
131
+ get granularity() {
132
+ return ctx.granularity;
133
+ },
134
+ get hourCycle() {
135
+ return ctx.hourCycle;
136
+ },
137
+ get minValue() {
138
+ return ctx.minValue;
139
+ },
140
+ get maxValue() {
141
+ return ctx.maxValue;
142
+ },
143
+ get isDisabled() {
144
+ return ctx.isDisabled;
145
+ },
146
+ get isReadOnly() {
147
+ return ctx.isReadOnly;
148
+ },
149
+ get children() {
150
+ return createMemo(() => createComponent(DateInput, {
151
+ get "aria-labelledby"() {
152
+ return ctx.ids.label;
153
+ },
154
+ get "data-date-picker-input"() {
155
+ return "";
156
+ }
157
+ }));
158
+ }
159
+ }));
118
160
  }
161
+ /** The bordered control: start field — end field, plus the calendar trigger. */
119
162
  function DateRangePickerField(props) {
120
- const ctx = useDateRangePickerContext();
121
- const [local, others] = splitProps(props, ["ref", "children", "fx", "style"]);
122
- const setRef = (node) => {
123
- ctx.setTriggerRef(node);
124
- handleRef(local.ref, node);
125
- };
126
- return (() => {
127
- const _el$ = createNativeElement("div");
128
- spread({ element: _el$, props: mergeProps(fxProps(
129
- () => local.fx,
130
- () => local.style
131
- ), others, { ref: setRef, role: "group", "aria-labelledby": () => ctx.ids.label, "data-date-picker-control": "", "data-date-range": "" }) });
132
- insert(_el$, createMemo(() => createComponent(EndpointField, { get value() {
133
- return ctx.start;
134
- }, get onChange() {
135
- return ctx.setStart;
136
- } })), null);
137
- insert(_el$, templateNode(_fxTmpl$0, "span"));
138
- insert(_el$, createMemo(() => createComponent(EndpointField, { get value() {
139
- return ctx.end;
140
- }, get onChange() {
141
- return ctx.setEnd;
142
- } })), null);
143
- insert(_el$, local.children ?? createMemo(() => createComponent(DateRangePickerTrigger, {})));
144
- return _el$;
145
- })();
163
+ const ctx = useDateRangePickerContext();
164
+ const [local, others] = splitProps(props, [
165
+ "ref",
166
+ "children",
167
+ "fx",
168
+ "style"
169
+ ]);
170
+ const setRef = (node) => {
171
+ ctx.setTriggerRef(node);
172
+ handleRef(local.ref, node);
173
+ };
174
+ return (() => {
175
+ const _el$ = createNativeElement("div");
176
+ spread({
177
+ element: _el$,
178
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
179
+ ref: setRef,
180
+ role: "group",
181
+ "aria-labelledby": () => ctx.ids.label,
182
+ "data-date-picker-control": "",
183
+ "data-date-range": ""
184
+ })
185
+ });
186
+ insert(_el$, createMemo(() => createComponent(EndpointField, {
187
+ get value() {
188
+ return ctx.start;
189
+ },
190
+ get onChange() {
191
+ return ctx.setStart;
192
+ }
193
+ })), null);
194
+ insert(_el$, templateNode(_fxTmpl$0, "span"));
195
+ insert(_el$, createMemo(() => createComponent(EndpointField, {
196
+ get value() {
197
+ return ctx.end;
198
+ },
199
+ get onChange() {
200
+ return ctx.setEnd;
201
+ }
202
+ })), null);
203
+ insert(_el$, local.children ?? createMemo(() => createComponent(DateRangePickerTrigger, {})), null);
204
+ return _el$;
205
+ })();
146
206
  }
207
+ /** Toggles the range-calendar popover. */
147
208
  function DateRangePickerTrigger(props) {
148
- const ctx = useDateRangePickerContext();
149
- const [local, others] = splitProps(props, ["onClick", "children", "fx", "style"]);
150
- return (() => {
151
- const _el$ = createNativeElement("button");
152
- spread({ element: _el$, props: mergeProps(fxProps(
153
- () => local.fx,
154
- () => local.style
155
- ), others, { type: "button", "aria-haspopup": "dialog", "aria-expanded": () => ctx.isOpen() ? "true" : "false", "aria-controls": () => ctx.ids.content, "aria-label": "Open calendar", disabled: () => ctx.isDisabled(), "data-date-picker-trigger": "", onClick: composeEventHandlers([
156
- local.onClick,
157
- () => {
158
- if (ctx.isDisabled() || ctx.isReadOnly()) return;
159
- ctx.setOpen(!ctx.isOpen());
160
- }
161
- ]) }) });
162
- insert(_el$, local.children ?? "📅");
163
- return _el$;
164
- })();
209
+ const ctx = useDateRangePickerContext();
210
+ const [local, others] = splitProps(props, [
211
+ "onClick",
212
+ "children",
213
+ "fx",
214
+ "style"
215
+ ]);
216
+ return (() => {
217
+ const _el$ = createNativeElement("button");
218
+ spread({
219
+ element: _el$,
220
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
221
+ type: "button",
222
+ "aria-haspopup": "dialog",
223
+ "aria-expanded": () => ctx.isOpen() ? "true" : "false",
224
+ "aria-controls": () => ctx.ids.content,
225
+ "aria-label": "Open calendar",
226
+ disabled: () => ctx.isDisabled(),
227
+ "data-date-picker-trigger": "",
228
+ onClick: composeEventHandlers([local.onClick, () => {
229
+ if (ctx.isDisabled() || ctx.isReadOnly()) return;
230
+ ctx.setOpen(!ctx.isOpen());
231
+ }])
232
+ })
233
+ });
234
+ insert(_el$, local.children ?? "📅", null);
235
+ return _el$;
236
+ })();
165
237
  }
238
+ /** The floating range-calendar panel; selecting a full range closes it. */
166
239
  function DateRangePickerContent(props) {
167
- const ctx = useDateRangePickerContext();
168
- const [local, others] = splitProps(props, ["ref", "children", "style", "fx", "style"]);
169
- const [element, setElement] = createSignal(void 0);
170
- const portalRef = useRef(null);
171
- createEffect(() => {
172
- if (!ctx.isOpen() && portalRef.current) portalRef.current.remove();
173
- });
174
- return createMemo(() => createComponent(Show, { get when() {
175
- return ctx.isOpen();
176
- }, get children() {
177
- return createMemo(() => createComponent(Portal, { get ref() {
178
- return portalRef;
179
- }, get children() {
180
- return createMemo(() => createComponent(FloatingPanel, mergeProps(others, { get setElement() {
181
- return setElement;
182
- }, get element() {
183
- return element;
184
- }, get forwardRef() {
185
- return local.ref;
186
- }, get fx() {
187
- return local.fx;
188
- }, get style() {
189
- return local.style;
190
- }, get children() {
191
- return local.children ?? createMemo(() => createComponent(DateRangePickerCalendar, {}));
192
- } })));
193
- } }));
194
- } }));
240
+ const ctx = useDateRangePickerContext();
241
+ const [local, others] = splitProps(props, [
242
+ "ref",
243
+ "children",
244
+ "style",
245
+ "fx",
246
+ "style"
247
+ ]);
248
+ const [element, setElement] = createSignal(void 0);
249
+ const portalRef = useRef(null);
250
+ createEffect(() => {
251
+ if (!ctx.isOpen() && portalRef.current) portalRef.current.remove();
252
+ });
253
+ return createMemo(() => createComponent(Show, {
254
+ get when() {
255
+ return ctx.isOpen();
256
+ },
257
+ get children() {
258
+ return createMemo(() => createComponent(Portal, {
259
+ get ref() {
260
+ return portalRef;
261
+ },
262
+ get children() {
263
+ return createMemo(() => createComponent(FloatingPanel, mergeProps(others, {
264
+ get setElement() {
265
+ return setElement;
266
+ },
267
+ get element() {
268
+ return element;
269
+ },
270
+ get forwardRef() {
271
+ return local.ref;
272
+ },
273
+ get fx() {
274
+ return local.fx;
275
+ },
276
+ get style() {
277
+ return local.style;
278
+ },
279
+ get children() {
280
+ return local.children ?? createMemo(() => createComponent(DateRangePickerCalendar, {}));
281
+ }
282
+ })));
283
+ }
284
+ }));
285
+ }
286
+ }));
195
287
  }
288
+ /** Inner panel — floating hooks run inside the portal. */
196
289
  function FloatingPanel(props) {
197
- const ctx = useDateRangePickerContext();
198
- const position = createFloatingPosition(ctx.triggerRef, props.element, {
199
- placement: ctx.placement,
200
- offset: ctx.offset
201
- });
202
- createDismissableLayer(props.element, {
203
- shouldExcludeTarget: (target) => {
204
- const trigger = ctx.triggerRef();
205
- return !!trigger && (trigger === target || trigger.contains(target));
206
- },
207
- onDismiss: () => ctx.setOpen(false)
208
- });
209
- createFocusScope(props.element, { trap: false, autoFocus: true, restoreFocus: true });
210
- createRenderEffect(() => {
211
- const el = props.element();
212
- if (!el) return;
213
- el.style.position = "absolute";
214
- el.style.left = `${Math.round(position.x())}px`;
215
- el.style.top = `${Math.round(position.y())}px`;
216
- });
217
- const setRef = (node) => {
218
- props.setElement(node);
219
- handleRef(props.forwardRef, node);
220
- };
221
- return (() => {
222
- const _el$ = createNativeElement("div");
223
- spread({ element: _el$, props: mergeProps(fxProps(
224
- () => props.fx,
225
- () => props.style
226
- ), { ref: setRef, role: "dialog", id: () => ctx.ids.content, "aria-label": "Calendar", "data-date-picker-content": "", "data-placement": () => position.placement(), tabindex: -1, onKeyDown: (e) => {
227
- if (e.key === "Escape") {
228
- e.stopPropagation();
229
- ctx.setOpen(false);
230
- ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
231
- }
232
- } }) });
233
- insert(_el$, props.children);
234
- return _el$;
235
- })();
290
+ const ctx = useDateRangePickerContext();
291
+ const position = createFloatingPosition(ctx.triggerRef, props.element, {
292
+ placement: ctx.placement,
293
+ offset: ctx.offset
294
+ });
295
+ createDismissableLayer(props.element, {
296
+ shouldExcludeTarget: (target) => {
297
+ const trigger = ctx.triggerRef();
298
+ return !!trigger && (trigger === target || trigger.contains(target));
299
+ },
300
+ onDismiss: () => ctx.setOpen(false)
301
+ });
302
+ createFocusScope(props.element, {
303
+ trap: false,
304
+ autoFocus: true,
305
+ restoreFocus: true
306
+ });
307
+ createRenderEffect(() => {
308
+ const el = props.element();
309
+ if (!el) return;
310
+ el.style.position = "absolute";
311
+ el.style.left = `${Math.round(position.x())}px`;
312
+ el.style.top = `${Math.round(position.y())}px`;
313
+ });
314
+ const setRef = (node) => {
315
+ props.setElement(node);
316
+ handleRef(props.forwardRef, node);
317
+ };
318
+ return (() => {
319
+ const _el$ = createNativeElement("div");
320
+ spread({
321
+ element: _el$,
322
+ props: mergeProps(fxProps(() => props.fx, () => props.style), {
323
+ ref: setRef,
324
+ role: "dialog",
325
+ id: () => ctx.ids.content,
326
+ "aria-label": "Calendar",
327
+ "data-date-picker-content": "",
328
+ "data-placement": () => position.placement(),
329
+ tabindex: -1,
330
+ onKeyDown: (e) => {
331
+ if (e.key === "Escape") {
332
+ e.stopPropagation();
333
+ ctx.setOpen(false);
334
+ ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
335
+ }
336
+ }
337
+ })
338
+ });
339
+ insert(_el$, props.children, null);
340
+ return _el$;
341
+ })();
236
342
  }
343
+ /** Default range calendar inside the popover; closes when a range completes. */
237
344
  function DateRangePickerCalendar() {
238
- const ctx = useDateRangePickerContext();
239
- return createMemo(() => createComponent(RangeCalendar, { get value() {
240
- return ctx.value;
241
- }, get onChange() {
242
- return (range) => {
243
- ctx.selectRange(range);
244
- if (range) ctx.setOpen(false);
245
- };
246
- }, get locale() {
247
- return ctx.locale;
248
- }, get minValue() {
249
- return ctx.minValue;
250
- }, get maxValue() {
251
- return ctx.maxValue;
252
- }, get isDateUnavailable() {
253
- return ctx.isDateUnavailable;
254
- }, get "data-date-picker-calendar"() {
255
- return "";
256
- }, get children() {
257
- return [createMemo(() => createComponent(CalendarHeader, { get children() {
258
- return [createMemo(() => createComponent(CalendarPrevButton, { get children() {
259
- return "‹";
260
- } })), createMemo(() => createComponent(CalendarHeading, {})), createMemo(() => createComponent(CalendarNextButton, { get children() {
261
- return "›";
262
- } }))];
263
- } })), createMemo(() => createComponent(CalendarGrid, {}))];
264
- } }));
345
+ const ctx = useDateRangePickerContext();
346
+ return createMemo(() => createComponent(RangeCalendar, {
347
+ get value() {
348
+ return ctx.value;
349
+ },
350
+ get onChange() {
351
+ return (range) => {
352
+ ctx.selectRange(range);
353
+ if (range) ctx.setOpen(false);
354
+ };
355
+ },
356
+ get locale() {
357
+ return ctx.locale;
358
+ },
359
+ get minValue() {
360
+ return ctx.minValue;
361
+ },
362
+ get maxValue() {
363
+ return ctx.maxValue;
364
+ },
365
+ get isDateUnavailable() {
366
+ return ctx.isDateUnavailable;
367
+ },
368
+ get "data-date-picker-calendar"() {
369
+ return "";
370
+ },
371
+ get children() {
372
+ return [createMemo(() => createComponent(CalendarHeader, { get children() {
373
+ return [
374
+ createMemo(() => createComponent(CalendarPrevButton, { get children() {
375
+ return "‹";
376
+ } })),
377
+ createMemo(() => createComponent(CalendarHeading, {})),
378
+ createMemo(() => createComponent(CalendarNextButton, { get children() {
379
+ return "›";
380
+ } }))
381
+ ];
382
+ } })), createMemo(() => createComponent(CalendarGrid, {}))];
383
+ }
384
+ }));
265
385
  }
266
- export {
267
- DateRangePicker,
268
- DateRangePickerCalendar,
269
- DateRangePickerContent,
270
- DateRangePickerField,
271
- DateRangePickerLabel,
272
- DateRangePickerTrigger,
273
- useDateRangePickerContext
274
- };
386
+ //#endregion
387
+ export { DateRangePicker, DateRangePickerCalendar, DateRangePickerContent, DateRangePickerField, DateRangePickerLabel, DateRangePickerTrigger, useDateRangePickerContext };