plass-ui 1.2.0 → 1.3.0
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 +78 -0
- package/dist/components/accordion/PlAccordion.js +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/avatar-group/PlAvatarGroup.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +55 -0
- package/dist/components/back-top/PlBackTop.js +1 -0
- package/dist/components/back-top/index.d.ts +2 -0
- package/dist/components/back-top/index.js +1 -0
- package/dist/components/badge/PlBadge.js +1 -1
- package/dist/components/blockquote/PlBlockquote.js +1 -1
- package/dist/components/bottom-navigation/PlBottomNavigation.js +1 -1
- package/dist/components/box/PlBox.js +1 -1
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/calendar/PlCalendar.d.ts +104 -0
- package/dist/components/calendar/PlCalendar.js +1 -0
- package/dist/components/calendar/index.d.ts +2 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/card/PlCard.js +1 -1
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/chat-bubble/PlChatBubble.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/collapsible/PlCollapsible.js +1 -1
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +11 -2
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.d.ts +1 -1
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.d.ts +100 -0
- package/dist/components/confirm/PlConfirmProvider.js +1 -0
- package/dist/components/confirm/index.d.ts +2 -0
- package/dist/components/confirm/index.js +1 -0
- package/dist/components/container/PlContainer.js +1 -1
- package/dist/components/date-picker/PlDatePicker.d.ts +41 -2
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
- package/dist/components/divider/PlDivider.js +1 -1
- package/dist/components/drawer/PlDrawer.d.ts +1 -1
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/empty/PlEmpty.d.ts +47 -0
- package/dist/components/empty/PlEmpty.js +1 -0
- package/dist/components/empty/index.d.ts +2 -0
- package/dist/components/empty/index.js +1 -0
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/footer/PlFooter.js +1 -1
- package/dist/components/header/PlHeader.js +1 -1
- package/dist/components/highlight/PlHighlight.js +1 -1
- package/dist/components/hot-keys/PlHotKeys.js +1 -1
- package/dist/components/image/PlImage.d.ts +72 -0
- package/dist/components/image/PlImage.js +1 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/image/index.js +1 -0
- package/dist/components/list/PlList.js +1 -1
- package/dist/components/menu/PlMenu.d.ts +2 -2
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/menubar/PlMenubar.js +1 -1
- package/dist/components/modal/PlModal.d.ts +1 -1
- package/dist/components/modal/PlModal.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +11 -2
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +10 -1
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/overlay/PlOverlay.d.ts +1 -1
- package/dist/components/overlay/PlOverlay.js +1 -1
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popconfirm/PlPopconfirm.d.ts +61 -0
- package/dist/components/popconfirm/PlPopconfirm.js +1 -0
- package/dist/components/popconfirm/index.d.ts +2 -0
- package/dist/components/popconfirm/index.js +1 -0
- package/dist/components/popover/PlPopover.d.ts +1 -1
- package/dist/components/popover/PlPopover.js +1 -1
- package/dist/components/progress-box/PlProgressBox.js +1 -1
- package/dist/components/progress-circular/PlProgressCircular.js +1 -1
- package/dist/components/progress-linear/PlProgressLinear.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/rating/PlRating.js +1 -1
- package/dist/components/scroll-zone/PlScrollZone.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.d.ts +10 -1
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/skeleton/PlSkeleton.js +1 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/spoiler/PlSpoiler.js +1 -1
- package/dist/components/stat/PlStat.d.ts +66 -0
- package/dist/components/stat/PlStat.js +1 -0
- package/dist/components/stat/index.d.ts +2 -0
- package/dist/components/stat/index.js +1 -0
- package/dist/components/stepper/PlStepper.d.ts +86 -0
- package/dist/components/stepper/PlStepper.js +1 -0
- package/dist/components/stepper/index.d.ts +2 -0
- package/dist/components/stepper/index.js +1 -0
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-field/PlTextField.d.ts +10 -1
- package/dist/components/text-field/PlTextField.js +1 -1
- package/dist/components/time-picker/PlTimePicker.js +1 -1
- package/dist/components/timeline/PlTimeline.d.ts +5 -8
- package/dist/components/timeline/PlTimeline.js +1 -1
- package/dist/components/toast/PlToast.d.ts +1 -1
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/toolbar/PlToolbar.js +1 -1
- package/dist/components/tooltip/PlTooltip.d.ts +1 -1
- package/dist/components/tooltip/PlTooltip.js +1 -1
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.d.ts +67 -0
- package/dist/components/tree/PlTree.js +1 -0
- package/dist/components/tree/index.d.ts +2 -0
- package/dist/components/tree/index.js +1 -0
- package/dist/components/visually-hidden/PlVisuallyHidden.d.ts +46 -0
- package/dist/components/visually-hidden/PlVisuallyHidden.js +1 -0
- package/dist/components/visually-hidden/index.d.ts +2 -0
- package/dist/components/visually-hidden/index.js +1 -0
- package/dist/css/back-top.css +2 -0
- package/dist/css/calendar.css +2 -0
- package/dist/css/confirm.css +2 -0
- package/dist/css/empty.css +2 -0
- package/dist/css/image.css +2 -0
- package/dist/css/popconfirm.css +2 -0
- package/dist/css/stat.css +2 -0
- package/dist/css/stepper.css +2 -0
- package/dist/css/tree.css +2 -0
- package/dist/css/visually-hidden.css +2 -0
- package/dist/hooks/index.d.ts +7 -0
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/usePlBreakpoint.d.ts +38 -0
- package/dist/hooks/usePlBreakpoint.js +1 -0
- package/dist/hooks/usePlColorScheme.d.ts +66 -0
- package/dist/hooks/usePlColorScheme.js +1 -0
- package/dist/hooks/usePlHotKeys.d.ts +81 -0
- package/dist/hooks/usePlHotKeys.js +1 -0
- package/dist/hooks/usePlMediaQuery.d.ts +22 -0
- package/dist/hooks/usePlMediaQuery.js +1 -0
- package/dist/hooks/usePlReducedMotion.d.ts +22 -0
- package/dist/hooks/usePlReducedMotion.js +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +1 -1
- package/dist/internal/animate.d.ts +0 -1
- package/dist/internal/animate.js +1 -1
- package/dist/internal/calendar.d.ts +25 -3
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/color-scheme.d.ts +23 -0
- package/dist/internal/color-scheme.js +1 -0
- package/dist/internal/date.d.ts +21 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +69 -0
- package/dist/internal/defaults.js +1 -0
- package/dist/internal/direction.d.ts +4 -0
- package/dist/internal/direction.js +1 -0
- package/dist/internal/grid.d.ts +2 -0
- package/dist/internal/grid.js +1 -1
- package/dist/internal/keys.d.ts +93 -0
- package/dist/internal/keys.js +1 -0
- package/dist/internal/media.d.ts +26 -0
- package/dist/internal/media.js +1 -0
- package/dist/internal/page-layout.d.ts +6 -6
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/steps.d.ts +76 -0
- package/dist/internal/steps.js +1 -0
- package/dist/provider/PlColorSchemeScript.d.ts +40 -0
- package/dist/provider/PlColorSchemeScript.js +1 -0
- package/dist/provider/PlassProvider.d.ts +39 -0
- package/dist/provider/PlassProvider.js +1 -0
- package/dist/provider/index.d.ts +5 -0
- package/dist/provider/index.js +1 -0
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +29 -1
- package/dist/tokens.css +29 -1
- package/dist/types.d.ts +17 -0
- package/package.json +17 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Whether the reader has asked their platform for less movement.
|
|
3
|
+
*
|
|
4
|
+
* `prefers-reduced-motion: reduce`, read as a boolean that re-renders when it
|
|
5
|
+
* changes. The library answers it on its own behalf everywhere it moves — every
|
|
6
|
+
* keyframe in the stylesheet is switched off at once, a typewriter simply
|
|
7
|
+
* arrives finished — and this is the same answer, for the motion an application
|
|
8
|
+
* writes itself.
|
|
9
|
+
*
|
|
10
|
+
* **"Reduced" is not "none", and the library's own components disagree with
|
|
11
|
+
* each other on purpose.** An entrance is dropped entirely, because an
|
|
12
|
+
* animation that never played has still delivered everything it was carrying. A
|
|
13
|
+
* loading indicator is *slowed* rather than stopped, because a spinner that
|
|
14
|
+
* stopped would be lying about whether anything is still happening. Which of
|
|
15
|
+
* those two an effect is, is the question to answer before reaching for this.
|
|
16
|
+
*
|
|
17
|
+
* The server's answer is `false` — it has no reader and so no preference — and
|
|
18
|
+
* so is the first answer in a browser. See `usePlMediaQuery` for why, and note
|
|
19
|
+
* that it is the safe direction here: the reader gets their preference in the
|
|
20
|
+
* render after hydration, before any of this has had a frame to run in.
|
|
21
|
+
*/
|
|
22
|
+
export declare function usePlReducedMotion(): boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{usePrefersReducedMotion as e}from"../internal/media.js";export function usePlReducedMotion(){return e()}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export * from './types.js';
|
|
2
|
+
export * from './hooks/index.js';
|
|
3
|
+
export * from './provider/index.js';
|
|
2
4
|
export * from './components/accordion/index.js';
|
|
3
5
|
export * from './components/alert/index.js';
|
|
4
6
|
export * from './components/animate-appear/index.js';
|
|
@@ -15,6 +17,7 @@ export * from './components/animate-zoom/index.js';
|
|
|
15
17
|
export * from './components/aspect-ratio/index.js';
|
|
16
18
|
export * from './components/avatar/index.js';
|
|
17
19
|
export * from './components/avatar-group/index.js';
|
|
20
|
+
export * from './components/back-top/index.js';
|
|
18
21
|
export * from './components/badge/index.js';
|
|
19
22
|
export * from './components/blockquote/index.js';
|
|
20
23
|
export * from './components/bottom-navigation/index.js';
|
|
@@ -22,6 +25,7 @@ export * from './components/box/index.js';
|
|
|
22
25
|
export * from './components/breadcrumb/index.js';
|
|
23
26
|
export * from './components/button/index.js';
|
|
24
27
|
export * from './components/button-group/index.js';
|
|
28
|
+
export * from './components/calendar/index.js';
|
|
25
29
|
export * from './components/card/index.js';
|
|
26
30
|
export * from './components/carousel/index.js';
|
|
27
31
|
export * from './components/chat-bubble/index.js';
|
|
@@ -30,6 +34,7 @@ export * from './components/chip/index.js';
|
|
|
30
34
|
export * from './components/collapsible/index.js';
|
|
31
35
|
export * from './components/color-picker/index.js';
|
|
32
36
|
export * from './components/combobox/index.js';
|
|
37
|
+
export * from './components/confirm/index.js';
|
|
33
38
|
export * from './components/command-palette/index.js';
|
|
34
39
|
export * from './components/container/index.js';
|
|
35
40
|
export * from './components/date-picker/index.js';
|
|
@@ -37,6 +42,7 @@ export * from './components/date-range-picker/index.js';
|
|
|
37
42
|
export * from './components/date-time-picker/index.js';
|
|
38
43
|
export * from './components/divider/index.js';
|
|
39
44
|
export * from './components/drawer/index.js';
|
|
45
|
+
export * from './components/empty/index.js';
|
|
40
46
|
export * from './components/fieldset/index.js';
|
|
41
47
|
export * from './components/file-picker/index.js';
|
|
42
48
|
export * from './components/floating-bottom-navigation/index.js';
|
|
@@ -48,6 +54,7 @@ export * from './components/highlight/index.js';
|
|
|
48
54
|
export * from './components/hot-keys/index.js';
|
|
49
55
|
export * from './components/icon/index.js';
|
|
50
56
|
export * from './components/icon-button/index.js';
|
|
57
|
+
export * from './components/image/index.js';
|
|
51
58
|
export * from './components/list/index.js';
|
|
52
59
|
export * from './components/menu/index.js';
|
|
53
60
|
export * from './components/menubar/index.js';
|
|
@@ -60,6 +67,7 @@ export * from './components/page-layout/index.js';
|
|
|
60
67
|
export * from './components/pagination/index.js';
|
|
61
68
|
export * from './components/panes/index.js';
|
|
62
69
|
export * from './components/pill/index.js';
|
|
70
|
+
export * from './components/popconfirm/index.js';
|
|
63
71
|
export * from './components/popover/index.js';
|
|
64
72
|
export * from './components/progress-box/index.js';
|
|
65
73
|
export * from './components/progress-circular/index.js';
|
|
@@ -73,6 +81,8 @@ export * from './components/sidebar/index.js';
|
|
|
73
81
|
export * from './components/skeleton/index.js';
|
|
74
82
|
export * from './components/slider/index.js';
|
|
75
83
|
export * from './components/spoiler/index.js';
|
|
84
|
+
export * from './components/stat/index.js';
|
|
85
|
+
export * from './components/stepper/index.js';
|
|
76
86
|
export * from './components/switch/index.js';
|
|
77
87
|
export * from './components/table/index.js';
|
|
78
88
|
export * from './components/tabs/index.js';
|
|
@@ -84,5 +94,7 @@ export * from './components/toast/index.js';
|
|
|
84
94
|
export * from './components/toggle/index.js';
|
|
85
95
|
export * from './components/toolbar/index.js';
|
|
86
96
|
export * from './components/tooltip/index.js';
|
|
97
|
+
export * from './components/tree/index.js';
|
|
87
98
|
export * from './components/transfer/index.js';
|
|
88
99
|
export * from './components/typography/index.js';
|
|
100
|
+
export * from './components/visually-hidden/index.js';
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export*from"./types.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/modal/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toggle/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";
|
|
1
|
+
export*from"./types.js";export*from"./hooks/index.js";export*from"./provider/index.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/back-top/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/calendar/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/confirm/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-bottom-navigation/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/hot-keys/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/image/index.js";export*from"./components/list/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/modal/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popconfirm/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/scroll-zone/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/spoiler/index.js";export*from"./components/stat/index.js";export*from"./components/stepper/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toast/index.js";export*from"./components/toggle/index.js";export*from"./components/toolbar/index.js";export*from"./components/tooltip/index.js";export*from"./components/tree/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";export*from"./components/visually-hidden/index.js";
|
|
@@ -93,7 +93,6 @@ export declare function slideOffsets(from: PlassSide, distance: number | string)
|
|
|
93
93
|
x: string;
|
|
94
94
|
y: string;
|
|
95
95
|
};
|
|
96
|
-
export declare function usePrefersReducedMotion(): boolean;
|
|
97
96
|
export interface AnimationRunOptions {
|
|
98
97
|
trigger: PlassAnimateTrigger;
|
|
99
98
|
play?: boolean;
|
package/dist/internal/animate.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"react";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink"};export const animBaseClass="plass-anim";export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return e.easing&&(n["--p-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--p-anim-x"]=e.x),void 0!==e.y&&(n["--p-anim-y"]=e.y),void 0!==e.angle&&(n["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--p-anim-angle-to"]=e.angleTo),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}
|
|
1
|
+
import*as e from"react";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink"};export const animBaseClass="plass-anim";export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return e.easing&&(n["--p-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--p-anim-x"]=e.x),void 0!==e.y&&(n["--p-anim-y"]=e.y),void 0!==e.angle&&(n["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--p-anim-angle-to"]=e.angleTo),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function useAnimationRun({trigger:n,play:t,once:a,threshold:i,paused:s,infinite:r}){const o=e.useRef(null),[l,u]=e.useState("mount"===n),[c,p]=e.useState(0),m=e.useCallback(()=>{u(!0),p(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=o.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".plass-anim, .plass-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==n)return;const e=o.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(m(),a&&t.disconnect()):a||u(!1)},{threshold:i});return t.observe(e),()=>t.disconnect()},[n,a,i,m]),e.useEffect(()=>{"manual"===n&&(t?m():u(!1))},[n,t,m]);const f="hover"===n?{onPointerEnter:m,onFocus:m,onPointerLeave:()=>{r&&u(!1)},onBlur:()=>{r&&u(!1)}}:{};return{ref:e.useCallback(e=>{o.current=e},[]),state:l&&!s?"running":"paused",started:l,handlers:f}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:s,paused:r,infinite:o,...l}=e,u=useAnimationRun({trigger:t,play:a,once:i,threshold:s,paused:r,infinite:o});return{ref:u.ref,className:n?`plass-anim ${animationClasses[n]}`:"",style:{...animationSlots(l),"--p-anim-state":u.state},props:{...u.handlers,"data-plass-animation":n??void 0,"data-state":u.state}}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { type TimeUnit } from './date.js';
|
|
2
|
+
import { type CalendarView, type TimeUnit } from './date.js';
|
|
3
3
|
import type { PlassColor, PlassDensity, PlassSize, PlassWeekday } from '../types.js';
|
|
4
4
|
/**
|
|
5
5
|
* The calendar grid and the clock columns, written once for the four pickers.
|
|
@@ -41,6 +41,9 @@ export interface PlassPickerLabels {
|
|
|
41
41
|
chooseYear: string;
|
|
42
42
|
/** The footer's actions. */
|
|
43
43
|
today: string;
|
|
44
|
+
/** The same shortcut on a picker that only asks for a month or a year. */
|
|
45
|
+
thisMonth: string;
|
|
46
|
+
thisYear: string;
|
|
44
47
|
now: string;
|
|
45
48
|
clear: string;
|
|
46
49
|
done: string;
|
|
@@ -54,7 +57,15 @@ export interface PlassPickerLabels {
|
|
|
54
57
|
end: string;
|
|
55
58
|
}
|
|
56
59
|
export declare const defaultPickerLabels: PlassPickerLabels;
|
|
57
|
-
/**
|
|
60
|
+
/**
|
|
61
|
+
* The labels a picker says, resolved once per render.
|
|
62
|
+
*
|
|
63
|
+
* Three layers, narrowest last: the English defaults above, whatever a
|
|
64
|
+
* `PlassProvider` set for the application, and the component's own overrides.
|
|
65
|
+
* That order is what lets an application translate the vocabulary once and a
|
|
66
|
+
* single picker still say something different — a "Check in" where the rest of
|
|
67
|
+
* the app says "Start".
|
|
68
|
+
*/
|
|
58
69
|
export declare function usePickerLabels(overrides?: Partial<PlassPickerLabels>): PlassPickerLabels;
|
|
59
70
|
export interface CalendarProps {
|
|
60
71
|
size: PlassSize;
|
|
@@ -64,6 +75,17 @@ export interface CalendarProps {
|
|
|
64
75
|
/** The month on screen. Controlled, so two panels can be kept a month apart. */
|
|
65
76
|
month: Date;
|
|
66
77
|
onMonthChange: (month: Date) => void;
|
|
78
|
+
/**
|
|
79
|
+
* The smallest unit this calendar hands back.
|
|
80
|
+
*
|
|
81
|
+
* `day` is the calendar everyone means. `month` and `year` stop the drilling
|
|
82
|
+
* one and two steps short: the grid the caller lands on is the last one, so
|
|
83
|
+
* pressing a cell in it selects rather than opening the grid below. The day
|
|
84
|
+
* grid is not merely hidden — it is unreachable, which is what makes the
|
|
85
|
+
* value the picker returns honest.
|
|
86
|
+
* @default 'day'
|
|
87
|
+
*/
|
|
88
|
+
precision?: CalendarView;
|
|
67
89
|
/** The days drawn filled — one for a single picker, up to two for a range. */
|
|
68
90
|
selected: readonly (Date | null | undefined)[];
|
|
69
91
|
/** The two ends the band is drawn between. Both `null` outside range mode. */
|
|
@@ -109,7 +131,7 @@ export interface CalendarProps {
|
|
|
109
131
|
* grid instead of walking forty-two cells — the pattern the ARIA date-picker
|
|
110
132
|
* practice describes, and the reason none of the cells is a `disabled` button.
|
|
111
133
|
*/
|
|
112
|
-
export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
|
|
134
|
+
export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, precision, selected, rangeStart, rangeEnd, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
|
|
113
135
|
export type { TimeUnit };
|
|
114
136
|
export interface TimeGridProps {
|
|
115
137
|
size: PlassSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as r}from"../components/button/PlButton.js";import{ChevronIcon as s}from"./icons.js";import{dateFormatter as n}from"./format.js";import{addDays as l,addMonths as a,addYears as i,calendarWeeks as c,compareDay as u,daysInMonth as d,isDayOutside as m,isMonthBeforeYear as h,isSameDay as p,isSameMonth as g,isValidDate as f,makeDate as v,meridiemLabels as x,monthLabels as b,startOfDay as y,startOfMonth as w,today as D,weekdayLabels as N,withTime as C,YEAR_PAGE_SIZE as M,yearPageStart as S}from"./date.js";import{controlHeightClasses as P,controlTextClasses as k,cx as Y,gapClasses as z,metaTextClasses as A,srOnlyClasses as F,transitionClasses as j}from"./styles.js";export const defaultPickerLabels={previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"};export function usePickerLabels(e){return t.useMemo(()=>e?{...defaultPickerLabels,...e}:defaultPickerLabels,[e])}const E={xs:"1.5rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},H={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-xs)",md:"rounded-(--plass-radius-sm)",lg:"rounded-(--plass-radius-md)",xl:"rounded-(--plass-radius-lg)"},R={xs:"rounded-s-(--plass-radius-xs)",sm:"rounded-s-(--plass-radius-xs)",md:"rounded-s-(--plass-radius-sm)",lg:"rounded-s-(--plass-radius-md)",xl:"rounded-s-(--plass-radius-lg)"},T={xs:"rounded-e-(--plass-radius-xs)",sm:"rounded-e-(--plass-radius-xs)",md:"rounded-e-(--plass-radius-sm)",lg:"rounded-e-(--plass-radius-md)",xl:"rounded-e-(--plass-radius-lg)"},B=/* @__PURE__ */["relative flex items-center justify-center tabular-nums select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:t,label:r,selected:s,inRange:n=!1,rangeEdge:l=null,current:a=!1,muted:i=!1,disabled:c=!1,focused:u=!1,size:d,className:m,onClick:h,onPointerEnter:p,onKeyDown:g}){return o("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":s,"aria-current":a?"date":void 0,"aria-disabled":c||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:Y(B,"start"===l?R[d]:"end"===l?T[d]:"middle"===l?"rounded-none":H[d],c?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":s?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":n?"cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)":a?"cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":i?"cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)",m),onClick:()=>{c||h()},onPointerEnter:p,onKeyDown:g,children:[t,a?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:n,color:l,view:a,month:i,locale:c,labels:u,showPreviousButton:d,showNextButton:m,onStep:p,onViewChange:g}){const f=b(c,"long")[i.getMonth()],v=String(i.getFullYear()),x=h(c),y="day"===a?[u.previousMonth,u.nextMonth]:"month"===a?[u.previousYear,u.nextYear]:[u.previousYears,u.nextYears],stepper=(o,t)=>t?e(r,{variant:"ghost",size:n,color:l,density:"compact","aria-label":y[-1===o?0:1],onClick:()=>p(o),startIcon:e("span",{className:Y("flex items-center",-1===o?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(s,{})})}):e("span",{"aria-hidden":"true",className:Y(P[n],"w-(--p-cell)")}),disclosure=o=>e("span",{className:Y("flex items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",o&&"rotate-180"),children:e(s,{})}),w=e(r,{variant:"ghost",size:n,color:l,density:"compact","aria-label":u.chooseMonth,"aria-expanded":"month"===a,onClick:()=>g("month"===a?"day":"month"),endIcon:disclosure("month"===a),children:f},"month"),D=e(r,{variant:"ghost",size:n,color:l,density:"compact",className:"tabular-nums","aria-label":u.chooseYear,"aria-expanded":"year"===a,onClick:()=>g("year"===a?"day":"year"),endIcon:disclosure("year"===a),children:v},"year"),N=S(i.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[stepper(-1,d),e("div",{className:Y("flex min-w-0 flex-1 items-center justify-center",z[n]),children:"year"===a?e("span",{className:Y("flex items-center font-semibold tabular-nums text-(--plass-fg)",P[n],k[n]),children:`${N}–${N+M-1}`}):"month"===a?D:o(t.Fragment,x?{children:[w,D]}:{children:[D,w]})}),stepper(1,m)]})}export function Calendar({size:r,color:s,locale:n,weekStartsOn:l,month:c,onMonthChange:u,selected:d,rangeStart:h=null,rangeEnd:p=null,onSelect:x,onPreviewChange:b,minDate:N,maxDate:C,shouldDisableDate:S,showOutsideDays:P=!0,autoFocus:k=!1,showPreviousButton:A=!0,showNextButton:F=!0,labels:j,className:H}){const[R,T]=t.useState("day"),B=t.useMemo(()=>d.filter(f),[d]),[L,G]=t.useState(()=>{const e=B.find(e=>g(e,c));return e?y(e):g(D(),c)?D():w(c)}),K=t.useRef(k),I=t.useRef(null);t.useEffect(()=>{G(e=>g(e,c)?e:w(c))},[c]),t.useLayoutEffect(()=>{K.current&&(K.current=!1,I.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const O=t.useCallback(e=>m(e,N,C)||(S?.(e)??!1),[N,C,S]),changeView=e=>{K.current=!0,T(e)},moveCursor=e=>{K.current=!0,u(e)};return o("div",{ref:I,className:Y("flex flex-col",z[r],H),style:{"--p-cell":E[r]},onPointerLeave:()=>b?.(null),children:[e(Header,{size:r,color:s,view:R,month:c,locale:n,labels:j,showPreviousButton:A,showNextButton:F,onStep:e=>{u("day"===R?a(c,e):i(c,"month"===R?e:e*M))},onViewChange:changeView}),e("div",{className:"h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]",children:"day"===R?e(DayGrid,{size:r,locale:n,weekStartsOn:l,month:c,chosen:B,rangeStart:h,rangeEnd:p,focusedDate:L,showOutsideDays:P,isDisabled:O,onSelect:e=>{G(e),x(e)},onPreviewChange:b,onMoveFocus:e=>{K.current=!0,G(e),g(e,c)||u(w(e))}}):"month"===R?e(MonthGrid,{size:r,locale:n,month:c,chosen:B,minDate:N,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{u(v(c.getFullYear(),e,1)),changeView("day")}}):e(YearGrid,{size:r,month:c,chosen:B,minDate:N,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{u(v(e,c.getMonth(),1)),changeView("month")}})})]})}function DayGrid({size:t,locale:r,weekStartsOn:s,month:i,chosen:d,rangeStart:m,rangeEnd:h,focusedDate:v,showOutsideDays:x,isDisabled:b,onSelect:y,onPreviewChange:w,onMoveFocus:C}){const M=c(i,s),S=N(r,s,"short"),P=N(r,s,"long"),z=n(r,{dateStyle:"full"}),F=function orderedRange(e,o){return f(e)&&f(o)?u(e,o)<=0?[e,o]:[o,e]:null}(m,h),j=D();return o("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,r)=>e("span",{role:"columnheader","aria-label":P[r],className:Y("flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none",A[t]),children:o},r))}),M.map((o,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const r=!g(o,i);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--p-cell)"},o.getTime());const n=d.some(e=>p(e,o)),c=null!==F&&u(o,F[0])>=0&&u(o,F[1])<=0,m=null!==F&&c&&p(o,F[0]),h=null!==F&&c&&p(o,F[1]);return e(Cell,{size:t,label:z.format(o),selected:n,inRange:c&&!n,rangeEdge:c?m&&h?"both":m?"start":h?"end":"middle":null,current:p(o,j)&&!n,muted:r,disabled:b(o),focused:p(o,v),className:Y("size-(--p-cell)",k[t]),onClick:()=>y(o),onPointerEnter:()=>w?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-s+7)%7,r={ArrowLeft:()=>l(o,-1),ArrowRight:()=>l(o,1),ArrowUp:()=>l(o,-7),ArrowDown:()=>l(o,7),Home:()=>l(o,-t),End:()=>l(o,6-t),PageUp:()=>a(o,e.shiftKey?-12:-1),PageDown:()=>a(o,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),C(r()))})(e,o),children:o.getDate()},o.getTime())})},r))]})}function MonthGrid({size:o,locale:t,month:r,chosen:s,minDate:n,maxDate:l,onMoveCursor:i,onPick:c}){const m=b(t,"short"),h=b(t,"long"),p=r.getFullYear(),g=new Date,onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),i(a(w(r),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(a=>{const i=3*t+a,x=v(p,i,1),b=v(p,i,d(p,i));return e(Cell,{size:o,label:`${h[i]} ${p}`,selected:s.some(e=>e.getFullYear()===p&&e.getMonth()===i),current:g.getFullYear()===p&&g.getMonth()===i,disabled:f(n)&&u(b,n)<0||f(l)&&u(x,l)>0,focused:i===r.getMonth(),className:Y("h-(--p-cell) w-full",k[o]),onClick:()=>c(i),onKeyDown,children:m[i]},i)})},t))})}function YearGrid({size:o,month:t,chosen:r,minDate:s,maxDate:n,onMoveCursor:l,onPick:a}){const c=S(t.getFullYear()),u=(new Date).getFullYear(),onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-M,PageDown:M}[e.key];void 0!==o&&(e.preventDefault(),l(i(w(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(l=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(i=>{const d=c+4*l+i;return e(Cell,{size:o,label:String(d),selected:r.some(e=>e.getFullYear()===d),current:d===u,disabled:f(s)&&d<s.getFullYear()||f(n)&&d>n.getFullYear(),focused:d===t.getFullYear(),className:Y("h-(--p-cell) w-full",k[o]),onClick:()=>a(d),onKeyDown,children:d},d)})},l))})}function revealInColumn(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),r=o.getBoundingClientRect(),s=t.top-r.top-o.clientTop+o.scrollTop,n=s+t.height;s<o.scrollTop?o.scrollTop=s:n>o.scrollTop+o.clientHeight&&(o.scrollTop=n-o.clientHeight)}export function TimeGrid({size:r,density:s,locale:l,value:a,referenceDate:i,onChange:c,hour12:u,showSeconds:d,hourStep:m,minuteStep:h,secondStep:p,shouldDisableTime:g,autoFocus:f=!1,labels:v,className:b}){const y=a??i,w=t.useRef(null),[D,N]=t.useMemo(()=>x(l),[l]);t.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn),f){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[f]);const M=t.useMemo(()=>{const e=Math.ceil((u?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return u?o.map(e=>0===e?12:e):o},[u,m]),S=t.useMemo(()=>Array.from({length:Math.ceil(60/h)},(e,o)=>o*h),[h]),z=t.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,o)=>o*p),[p]),pad=e=>String(e).padStart(2,"0"),A=u?y.getHours()%12||12:y.getHours(),column=(o,t,s,n,l)=>e("div",{role:"listbox","aria-label":t,className:Y("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"),children:s.map(t=>{const s=((e,o)=>C(y,"hour"===e?{hours:u?o%12+(y.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:y.getHours()%12+12*o}))(o,t),i=null!==a&&n(t),d=g?.(s,o)??!1;return e("button",{type:"button",role:"option","aria-selected":i,"aria-disabled":d||void 0,"data-chosen":i?"true":void 0,className:Y(B,H[r],P[r],k[r],"w-full shrink-0",d?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":i?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)"),onClick:()=>{d||c(s)},children:l(t)},t)})},o);return o("div",{ref:w,className:Y("flex","compact"===s?"gap-0.5":"gap-1",b),style:{"--p-cell":E[r]},children:[column("hour",v.hour,M,e=>e===A,e=>u?String(e):pad(e)),column("minute",v.minute,S,e=>e===y.getMinutes(),pad),d?column("second",v.second,z,e=>e===y.getSeconds(),pad):null,u?column("meridiem",v.meridiem,[0,1],e=>(y.getHours()>=12?1:0)===e,e=>0===e?D:N):null,e("span",{className:F,"aria-live":"polite",children:null===a?"":n(l,{hour:"numeric",minute:"2-digit",...d?{second:"2-digit"}:{}}).format(a)})]})}
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"./defaults.js";import{PlButton as s}from"../components/button/PlButton.js";import{ChevronIcon as n}from"./icons.js";import{dateFormatter as l}from"./format.js";import{addDays as a,addMonths as i,addYears as c,calendarWeeks as u,compareDay as d,isDayOutside as m,isMonthBeforeYear as h,isMonthOutside as p,isSameDay as g,isSameMonth as f,isValidDate as v,isYearOutside as x,makeDate as b,meridiemLabels as y,monthLabels as w,startOfDay as D,startOfMonth as N,today as M,weekdayLabels as C,withTime as S,YEAR_PAGE_SIZE as P,yearPageStart as k}from"./date.js";import{controlHeightClasses as Y,controlTextClasses as z,cx as A,gapClasses as j,metaTextClasses as E,srOnlyClasses as F,transitionClasses as T}from"./styles.js";export const defaultPickerLabels={previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"};export function usePickerLabels(e){const{labels:o}=r();return t.useMemo(()=>o||e?{...defaultPickerLabels,...o,...e}:defaultPickerLabels,[o,e])}const H={year:0,month:1,day:2},R={xs:"1.5rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},B={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-xs)",md:"rounded-(--plass-radius-sm)",lg:"rounded-(--plass-radius-md)",xl:"rounded-(--plass-radius-lg)"},L={xs:"rounded-s-(--plass-radius-xs)",sm:"rounded-s-(--plass-radius-xs)",md:"rounded-s-(--plass-radius-sm)",lg:"rounded-s-(--plass-radius-md)",xl:"rounded-s-(--plass-radius-lg)"},G={xs:"rounded-e-(--plass-radius-xs)",sm:"rounded-e-(--plass-radius-xs)",md:"rounded-e-(--plass-radius-sm)",lg:"rounded-e-(--plass-radius-md)",xl:"rounded-e-(--plass-radius-lg)"},K=/* @__PURE__ */["relative flex items-center justify-center tabular-nums select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",T,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:t,label:r,selected:s,inRange:n=!1,rangeEdge:l=null,current:a=!1,muted:i=!1,disabled:c=!1,focused:u=!1,size:d,className:m,onClick:h,onPointerEnter:p,onKeyDown:g}){return o("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":s,"aria-current":a?"date":void 0,"aria-disabled":c||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:A(K,"start"===l?L[d]:"end"===l?G[d]:"middle"===l?"rounded-none":B[d],c?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":s?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":n?"cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)":a?"cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":i?"cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)",m),onClick:()=>{c||h()},onPointerEnter:p,onKeyDown:g,children:[t,a?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:l,view:a,precision:i,month:c,locale:u,labels:d,showPreviousButton:m,showNextButton:p,onStep:g,onViewChange:f}){const v=w(u,"long")[c.getMonth()],x=String(c.getFullYear()),b=h(u),y="day"===a?[d.previousMonth,d.nextMonth]:"month"===a?[d.previousYear,d.nextYear]:[d.previousYears,d.nextYears],stepper=(o,t)=>t?e(s,{variant:"ghost",size:r,color:l,density:"compact","aria-label":y[-1===o?0:1],onClick:()=>g(o),startIcon:e("span",{className:A("flex items-center",-1===o?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(n,{})})}):e("span",{"aria-hidden":"true",className:A(Y[r],"w-(--p-cell)")}),disclosure=o=>e("span",{className:A("flex items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",o&&"rotate-180"),children:e(n,{})}),D=e(s,{variant:"ghost",size:r,color:l,density:"compact","aria-label":d.chooseMonth,"aria-expanded":"month"===a,onClick:()=>f("month"===a?i:"month"),endIcon:disclosure("month"===a),children:v},"month"),N=e(s,{variant:"ghost",size:r,color:l,density:"compact",className:"tabular-nums","aria-label":d.chooseYear,"aria-expanded":"year"===a,onClick:()=>f("year"===a?i:"year"),endIcon:disclosure("year"===a),children:x},"year"),M=k(c.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[stepper(-1,m),e("div",{className:A("flex min-w-0 flex-1 items-center justify-center",j[r]),children:"year"===a?e("span",{className:A("flex items-center font-semibold tabular-nums text-(--plass-fg)",Y[r],z[r]),children:`${M}–${M+P-1}`}):"month"===a?N:o(t.Fragment,b?{children:[D,N]}:{children:[N,D]})}),stepper(1,p)]})}export function Calendar({size:r,color:s,locale:n,weekStartsOn:l,month:a,onMonthChange:u,precision:d="day",selected:h,rangeStart:p=null,rangeEnd:g=null,onSelect:x,onPreviewChange:y,minDate:w,maxDate:C,shouldDisableDate:S,showOutsideDays:k=!0,autoFocus:Y=!1,showPreviousButton:z=!0,showNextButton:E=!0,labels:F,className:T}){const[B,L]=t.useState(d),G=H[B]>H[d]?d:B,K=t.useMemo(()=>h.filter(v),[h]),[I,O]=t.useState(()=>{const e=K.find(e=>f(e,a));return e?D(e):f(M(),a)?M():N(a)}),U=t.useRef(Y),q=t.useRef(null);t.useEffect(()=>{O(e=>f(e,a)?e:N(a))},[a]),t.useLayoutEffect(()=>{U.current&&(U.current=!1,q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const $=t.useCallback(e=>m(e,w,C)||(S?.(e)??!1),[w,C,S]),changeView=e=>{U.current=!0,L(e)},moveCursor=e=>{U.current=!0,u(e)};return o("div",{ref:q,className:A("flex flex-col",j[r],T),style:{"--p-cell":R[r]},onPointerLeave:()=>y?.(null),children:[e(Header,{size:r,color:s,view:G,precision:d,month:a,locale:n,labels:F,showPreviousButton:z,showNextButton:E,onStep:e=>{u("day"===G?i(a,e):c(a,"month"===G?e:e*P))},onViewChange:changeView}),e("div",{className:"h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]",children:"day"===G?e(DayGrid,{size:r,locale:n,weekStartsOn:l,month:a,chosen:K,rangeStart:p,rangeEnd:g,focusedDate:I,showOutsideDays:k,isDisabled:$,onSelect:e=>{O(e),x(e)},onPreviewChange:y,onMoveFocus:e=>{U.current=!0,O(e),f(e,a)||u(N(e))}}):"month"===G?e(MonthGrid,{size:r,locale:n,month:a,chosen:K,minDate:w,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{const o=b(a.getFullYear(),e,1);u(o),"month"===d?x(o):changeView("day")}}):e(YearGrid,{size:r,month:a,chosen:K,minDate:w,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{const o=b(e,"year"===d?0:a.getMonth(),1);u(o),"year"===d?x(o):changeView("month")}})})]})}function DayGrid({size:t,locale:r,weekStartsOn:s,month:n,chosen:c,rangeStart:m,rangeEnd:h,focusedDate:p,showOutsideDays:x,isDisabled:b,onSelect:y,onPreviewChange:w,onMoveFocus:D}){const N=u(n,s),S=C(r,s,"short"),P=C(r,s,"long"),k=l(r,{dateStyle:"full"}),Y=function orderedRange(e,o){return v(e)&&v(o)?d(e,o)<=0?[e,o]:[o,e]:null}(m,h),j=M();return o("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,r)=>e("span",{role:"columnheader","aria-label":P[r],className:A("flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none",E[t]),children:o},r))}),N.map((o,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const r=!f(o,n);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--p-cell)"},o.getTime());const l=c.some(e=>g(e,o)),u=null!==Y&&d(o,Y[0])>=0&&d(o,Y[1])<=0,m=null!==Y&&u&&g(o,Y[0]),h=null!==Y&&u&&g(o,Y[1]);return e(Cell,{size:t,label:k.format(o),selected:l,inRange:u&&!l,rangeEdge:u?m&&h?"both":m?"start":h?"end":"middle":null,current:g(o,j)&&!l,muted:r,disabled:b(o),focused:g(o,p),className:A("size-(--p-cell)",z[t]),onClick:()=>y(o),onPointerEnter:()=>w?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-s+7)%7,r={ArrowLeft:()=>a(o,-1),ArrowRight:()=>a(o,1),ArrowUp:()=>a(o,-7),ArrowDown:()=>a(o,7),Home:()=>a(o,-t),End:()=>a(o,6-t),PageUp:()=>i(o,e.shiftKey?-12:-1),PageDown:()=>i(o,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,o),children:o.getDate()},o.getTime())})},r))]})}function MonthGrid({size:o,locale:t,month:r,chosen:s,minDate:n,maxDate:l,onMoveCursor:a,onPick:c}){const u=w(t,"short"),d=w(t,"long"),m=r.getFullYear(),h=new Date,onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),a(i(N(r),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(a=>{const i=3*t+a;return e(Cell,{size:o,label:`${d[i]} ${m}`,selected:s.some(e=>e.getFullYear()===m&&e.getMonth()===i),current:h.getFullYear()===m&&h.getMonth()===i,disabled:p(b(m,i,1),n,l),focused:i===r.getMonth(),className:A("h-(--p-cell) w-full",z[o]),onClick:()=>c(i),onKeyDown,children:u[i]},i)})},t))})}function YearGrid({size:o,month:t,chosen:r,minDate:s,maxDate:n,onMoveCursor:l,onPick:a}){const i=k(t.getFullYear()),u=(new Date).getFullYear(),onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-P,PageDown:P}[e.key];void 0!==o&&(e.preventDefault(),l(c(N(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(l=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(c=>{const d=i+4*l+c;return e(Cell,{size:o,label:String(d),selected:r.some(e=>e.getFullYear()===d),current:d===u,disabled:x(b(d,0,1),s,n),focused:d===t.getFullYear(),className:A("h-(--p-cell) w-full",z[o]),onClick:()=>a(d),onKeyDown,children:d},d)})},l))})}function revealInColumn(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),r=o.getBoundingClientRect(),s=t.top-r.top-o.clientTop+o.scrollTop,n=s+t.height;s<o.scrollTop?o.scrollTop=s:n>o.scrollTop+o.clientHeight&&(o.scrollTop=n-o.clientHeight)}export function TimeGrid({size:r,density:s,locale:n,value:a,referenceDate:i,onChange:c,hour12:u,showSeconds:d,hourStep:m,minuteStep:h,secondStep:p,shouldDisableTime:g,autoFocus:f=!1,labels:v,className:x}){const b=a??i,w=t.useRef(null),[D,N]=t.useMemo(()=>y(n),[n]);t.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn),f){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[f]);const M=t.useMemo(()=>{const e=Math.ceil((u?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return u?o.map(e=>0===e?12:e):o},[u,m]),C=t.useMemo(()=>Array.from({length:Math.ceil(60/h)},(e,o)=>o*h),[h]),P=t.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,o)=>o*p),[p]),pad=e=>String(e).padStart(2,"0"),k=u?b.getHours()%12||12:b.getHours(),column=(o,t,s,n,l)=>e("div",{role:"listbox","aria-label":t,className:A("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"),children:s.map(t=>{const s=((e,o)=>S(b,"hour"===e?{hours:u?o%12+(b.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:b.getHours()%12+12*o}))(o,t),i=null!==a&&n(t),d=g?.(s,o)??!1;return e("button",{type:"button",role:"option","aria-selected":i,"aria-disabled":d||void 0,"data-chosen":i?"true":void 0,className:A(K,B[r],Y[r],z[r],"w-full shrink-0",d?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":i?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)"),onClick:()=>{d||c(s)},children:l(t)},t)})},o);return o("div",{ref:w,className:A("flex","compact"===s?"gap-0.5":"gap-1",x),style:{"--p-cell":R[r]},children:[column("hour",v.hour,M,e=>e===k,e=>u?String(e):pad(e)),column("minute",v.minute,C,e=>e===b.getMinutes(),pad),d?column("second",v.second,P,e=>e===b.getSeconds(),pad):null,u?column("meridiem",v.meridiem,[0,1],e=>(b.getHours()>=12?1:0)===e,e=>0===e?D:N):null,e("span",{className:F,"aria-live":"polite",children:null===a?"":l(n,{hour:"numeric",minute:"2-digit",...d?{second:"2-digit"}:{}}).format(a)})]})}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** What the reader chose. `system` is the absence of a choice, not a third theme. */
|
|
2
|
+
export type PlColorScheme = 'light' | 'dark' | 'system';
|
|
3
|
+
/** What the page is actually painted in, once `system` has been resolved. */
|
|
4
|
+
export type PlResolvedColorScheme = 'light' | 'dark';
|
|
5
|
+
export declare const DEFAULT_STORAGE_KEY = "plass-color-scheme";
|
|
6
|
+
export declare const darkQuery = "(prefers-color-scheme: dark)";
|
|
7
|
+
/**
|
|
8
|
+
* Writes the choice onto `<html>`.
|
|
9
|
+
*
|
|
10
|
+
* **Both** the attribute and the class, and not as belt and braces: the
|
|
11
|
+
* attribute is what this library's tokens read, and the class is what a
|
|
12
|
+
* consumer's own Tailwind `dark:` utilities read when they are configured
|
|
13
|
+
* against a class rather than the media query. A toggle that moved one and not
|
|
14
|
+
* the other would leave a page half switched.
|
|
15
|
+
*
|
|
16
|
+
* `system` removes both, which is not the same as writing `light`: it hands the
|
|
17
|
+
* question back to `prefers-color-scheme`, so the page follows the platform
|
|
18
|
+
* again rather than being pinned to the platform's current answer.
|
|
19
|
+
*/
|
|
20
|
+
export declare function applyColorScheme(scheme: PlColorScheme): void;
|
|
21
|
+
/** Whatever was stored, if it is one of the three. */
|
|
22
|
+
export declare function readStoredScheme(key: string): PlColorScheme | null;
|
|
23
|
+
export declare function useColorSchemeStore(key: string, fallback: PlColorScheme): [PlColorScheme, (next: PlColorScheme) => void];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import*as e from"react";export const DEFAULT_STORAGE_KEY="plass-color-scheme";export const darkQuery="(prefers-color-scheme: dark)";export function applyColorScheme(e){if("undefined"==typeof document)return;const t=document.documentElement;t.classList.remove("light","dark"),"system"!==e?(t.dataset.theme=e,t.classList.add(e)):delete t.dataset.theme}export function readStoredScheme(e){if("undefined"==typeof localStorage)return null;try{const t=localStorage.getItem(e);return"light"===t||"dark"===t||"system"===t?t:null}catch{return null}}const t=new Map;function storeFor(e,r){let o=t.get(e);return o||(o={scheme:readStoredScheme(e)??r,listeners:new Set},t.set(e,o)),o}export function useColorSchemeStore(t,r){const o=e.useCallback(e=>{const o=storeFor(t,r);o.listeners.add(e);const onStorage=e=>{if(e.key!==t)return;const s=readStoredScheme(t)??r;s!==o.scheme&&(o.scheme=s,applyColorScheme(s),o.listeners.forEach(e=>e()))};return window.addEventListener("storage",onStorage),()=>{o.listeners.delete(e),window.removeEventListener("storage",onStorage)}},[t,r]),s=e.useCallback(()=>storeFor(t,r).scheme,[t,r]),n=e.useCallback(()=>r,[r]),c=e.useSyncExternalStore(o,s,n),l=e.useCallback(e=>{const o=storeFor(t,r);o.scheme=e,function writeStoredScheme(e,t){try{localStorage.setItem(e,t)}catch{}}(t,e),applyColorScheme(e),o.listeners.forEach(e=>e())},[t,r]);return[c,l]}
|
package/dist/internal/date.d.ts
CHANGED
|
@@ -48,6 +48,8 @@ export declare function isValidDate(value: unknown): value is Date;
|
|
|
48
48
|
export declare function startOfDay(date: Date): Date;
|
|
49
49
|
/** The first day of the month this date is in, at midnight. */
|
|
50
50
|
export declare function startOfMonth(date: Date): Date;
|
|
51
|
+
/** The 1st of January of the year this date is in, at midnight. */
|
|
52
|
+
export declare function startOfYear(date: Date): Date;
|
|
51
53
|
/** How many days a month has, leap years included. */
|
|
52
54
|
export declare function daysInMonth(year: number, month: number): number;
|
|
53
55
|
/** Today, at midnight. The one place the pickers read the clock for a *date*. */
|
|
@@ -77,6 +79,18 @@ export declare function clampDate(date: Date, min?: Date | null, max?: Date | nu
|
|
|
77
79
|
* once an hour has been chosen.
|
|
78
80
|
*/
|
|
79
81
|
export declare function isDayOutside(date: Date, min?: Date | null, max?: Date | null): boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Is *every* day of this month outside the allowed span?
|
|
84
|
+
*
|
|
85
|
+
* A month is unreachable only when nothing in it is reachable: the month a
|
|
86
|
+
* `minDate` of the 15th falls in still exists, it just starts late. That is the
|
|
87
|
+
* rule the month grid has always drawn, and it is also what a `month` picker
|
|
88
|
+
* reads its bounds at — a bound on a picker that returns a month is a bound on
|
|
89
|
+
* months.
|
|
90
|
+
*/
|
|
91
|
+
export declare function isMonthOutside(date: Date, min?: Date | null, max?: Date | null): boolean;
|
|
92
|
+
/** The same question about a whole year, for a `year` picker. */
|
|
93
|
+
export declare function isYearOutside(date: Date, min?: Date | null, max?: Date | null): boolean;
|
|
80
94
|
/** Seconds since local midnight — what `minTime`/`maxTime` are compared on. */
|
|
81
95
|
export declare function secondsOfDay(date: Date): number;
|
|
82
96
|
/** Which column of a clock a candidate time is being offered for. */
|
|
@@ -143,6 +157,13 @@ export declare function withPlaceholder(samples: string[], placeholder: unknown)
|
|
|
143
157
|
* server that already parses those needs no new code.
|
|
144
158
|
*/
|
|
145
159
|
export declare function toISODate(date: Date): string;
|
|
160
|
+
/**
|
|
161
|
+
* The two shorter spellings, for a picker that only asked for a month or a
|
|
162
|
+
* year. `YYYY-MM` is what the native `<input type="month">` submits; there is no
|
|
163
|
+
* native control that submits a year, so a year is just the year.
|
|
164
|
+
*/
|
|
165
|
+
export declare function toISOMonth(date: Date): string;
|
|
166
|
+
export declare function toISOYear(date: Date): string;
|
|
146
167
|
export declare function toISOTime(date: Date, withSeconds?: boolean): string;
|
|
147
168
|
export declare function toISODateTime(date: Date, withSeconds?: boolean): string;
|
|
148
169
|
/**
|
package/dist/internal/date.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function clampDate(t,e,r){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(r)&&t.getTime()>r.getTime()?new Date(r.getTime()):t}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,r,n){return isValidDate(e)?t(r,n).format(e):""}const e=/* @__PURE__ */Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(r,n){const o=t(r,n);return[...new Set(e.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),r=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${r}:${pad(t.getSeconds())}`:r}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=/* @__PURE__ */makeDate(2021,7,1);export function weekdayLabels(e,n,o="short"){const a=t(e,{weekday:o});return Array.from({length:7},(t,e)=>a.format(addDays(r,(n+e)%7)))}export function monthLabels(e,r="short"){const n=t(e,{month:r});return Array.from({length:12},(t,e)=>n.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const n=t(e,{year:"numeric",month:"long"}).formatToParts(r);return n.findIndex(t=>"month"===t.type)<n.findIndex(t=>"year"===t.type)}export function isHour12(e){const r=t(e,{hour:"numeric"}).resolvedOptions();return r.hourCycle?"h11"===r.hourCycle||"h12"===r.hourCycle:!0===r.hour12}export function meridiemLabels(e){const n=t(e,{hour:"numeric",hour12:!0}),read=t=>{const e=n.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}
|
|
1
|
+
import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function startOfYear(t){return makeDate(t.getFullYear(),0,1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function clampDate(t,e,r){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(r)&&t.getTime()>r.getTime()?new Date(r.getTime()):t}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function isMonthOutside(t,e,r){const n=t.getFullYear(),o=t.getMonth();return isDayOutside(makeDate(n,o,daysInMonth(n,o)),e,null)||isDayOutside(makeDate(n,o,1),null,r)}export function isYearOutside(t,e,r){const n=t.getFullYear();return isValidDate(e)&&n<e.getFullYear()||isValidDate(r)&&n>r.getFullYear()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,r,n){return isValidDate(e)?t(r,n).format(e):""}const e=/* @__PURE__ */Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(r,n){const o=t(r,n);return[...new Set(e.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOMonth(t){return`${String(t.getFullYear()).padStart(4,"0")}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),r=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${r}:${pad(t.getSeconds())}`:r}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=/* @__PURE__ */makeDate(2021,7,1);export function weekdayLabels(e,n,o="short"){const a=t(e,{weekday:o});return Array.from({length:7},(t,e)=>a.format(addDays(r,(n+e)%7)))}export function monthLabels(e,r="short"){const n=t(e,{month:r});return Array.from({length:12},(t,e)=>n.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const n=t(e,{year:"numeric",month:"long"}).formatToParts(r);return n.findIndex(t=>"month"===t.type)<n.findIndex(t=>"year"===t.type)}export function isHour12(e){const r=t(e,{hour:"numeric"}).resolvedOptions();return r.hourCycle?"h11"===r.hourCycle||"h12"===r.hourCycle:!0===r.hour12}export function meridiemLabels(e){const n=t(e,{hour:"numeric",hour12:!0}),read=t=>{const e=n.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The defaults an application sets once, and every component reads.
|
|
3
|
+
*
|
|
4
|
+
* The context lives here rather than beside `PlassProvider` for the reason
|
|
5
|
+
* `internal/button-group.ts` gives one folder over: seventy components read it
|
|
6
|
+
* and one component writes it, and none of them should have to import the
|
|
7
|
+
* other.
|
|
8
|
+
*
|
|
9
|
+
* **What is in here is decided by one rule: an axis belongs to the application
|
|
10
|
+
* or it belongs to the component.** `size` and `density` are the application's
|
|
11
|
+
* — a product that is compact is compact everywhere, and repeating `size="sm"`
|
|
12
|
+
* at four hundred call sites is not a design decision, it is transcription.
|
|
13
|
+
* `color` is the application's for the same reason, one step weaker: a brand
|
|
14
|
+
* whose primary family is `secondary` says so once.
|
|
15
|
+
*
|
|
16
|
+
* `variant` and `elevation` are **not** here, and their absence is the load
|
|
17
|
+
* bearing part:
|
|
18
|
+
*
|
|
19
|
+
* - `variant` names what a surface is *made of*, and the design language spends
|
|
20
|
+
* its first paragraph on the fact that a pressed thing and a thing that holds
|
|
21
|
+
* content are different materials. A button defaults to `solid` and a card to
|
|
22
|
+
* `glass` because that is the arrangement, not because nobody got round to
|
|
23
|
+
* configuring it. One value for both is not a default, it is a flattening.
|
|
24
|
+
* - `elevation` is per-component semantics for the same reason: a control rests
|
|
25
|
+
* **on** the sheet and defaults to `1`, a field is cut **into** it and
|
|
26
|
+
* defaults to `0`. A single number for the two says the opposite of what the
|
|
27
|
+
* ladder means.
|
|
28
|
+
*
|
|
29
|
+
* A caller who genuinely wants every button glass writes it on the buttons.
|
|
30
|
+
*/
|
|
31
|
+
import * as React from 'react';
|
|
32
|
+
import type { PlassPickerLabels } from './calendar.js';
|
|
33
|
+
import type { PlassDirection } from './direction.js';
|
|
34
|
+
import type { PlassColor, PlassDensity, PlassSize, PlassWeekday } from '../types.js';
|
|
35
|
+
/** Everything a `PlassProvider` can decide for the tree under it. */
|
|
36
|
+
export interface PlassDefaults {
|
|
37
|
+
/** The rung of the size ladder every component starts from. */
|
|
38
|
+
size?: PlassSize;
|
|
39
|
+
/** The semantic family they start from. */
|
|
40
|
+
color?: PlassColor;
|
|
41
|
+
/** How tightly they pack their content. */
|
|
42
|
+
density?: PlassDensity;
|
|
43
|
+
/** The BCP 47 tag the date and time components format and read against. */
|
|
44
|
+
locale?: string;
|
|
45
|
+
/** Which day their weeks start on, as `Date` counts them — Sunday is `0`. */
|
|
46
|
+
weekStartsOn?: PlassWeekday;
|
|
47
|
+
/** The strings a picker says that `Intl` has no opinion about. */
|
|
48
|
+
labels?: Partial<PlassPickerLabels>;
|
|
49
|
+
/**
|
|
50
|
+
* Which way the tree runs, for the behaviours that read it in JavaScript.
|
|
51
|
+
*
|
|
52
|
+
* Left out is not "left to right" — it is **"read it off the document"**,
|
|
53
|
+
* which is what a page that wrote `dir="rtl"` already said. Set it only for a
|
|
54
|
+
* subtree that runs the other way from the page around it, or on a server
|
|
55
|
+
* that knows the answer before there is a document to ask.
|
|
56
|
+
*/
|
|
57
|
+
direction?: PlassDirection;
|
|
58
|
+
}
|
|
59
|
+
export declare const DefaultsContext: React.Context<PlassDefaults>;
|
|
60
|
+
/**
|
|
61
|
+
* What the nearest `PlassProvider` decided, or nothing.
|
|
62
|
+
*
|
|
63
|
+
* Every component that reads this resolves in the same order and it is the
|
|
64
|
+
* order a reader would guess: **the component's own prop, then whatever set is
|
|
65
|
+
* around it, then the provider, then the component's own default.** So a
|
|
66
|
+
* `size="lg"` on one button still wins inside a `PlButtonGroup` inside a
|
|
67
|
+
* compact application.
|
|
68
|
+
*/
|
|
69
|
+
export declare function useDefaults(): PlassDefaults;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import*as t from"react";const e=/* @__PURE__ */Object.freeze({});export const DefaultsContext=/* @__PURE__ */t.createContext(e);export function useDefaults(){return t.useContext(DefaultsContext)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import*as e from"react";function read(){return"undefined"==typeof document?"ltr":"rtl"===getComputedStyle(document.documentElement).direction?"rtl":"ltr"}let t=null,n=null;const r=new Set;function snapshot(){return null===t&&(t=read()),t}function onServer(){return"ltr"}function subscribe(e){return r.add(e),n||"undefined"==typeof document||(n=new MutationObserver(()=>{const e=read();e!==t&&(t=e,r.forEach(e=>e()))}),n.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class","style"]})),()=>{r.delete(e),0===r.size&&(n?.disconnect(),n=null,t=null)}}export function useDocumentDirection(){return e.useSyncExternalStore(subscribe,snapshot,onServer)}
|
package/dist/internal/grid.d.ts
CHANGED
|
@@ -18,6 +18,8 @@ import type * as React from 'react';
|
|
|
18
18
|
import type { PlassAlignItems, PlassAlignSelf, PlassBreakpoint, PlassJustify, PlassResponsive } from '../types.js';
|
|
19
19
|
/** Smallest first, which is also the order the media queries have to be in. */
|
|
20
20
|
export declare const breakpoints: readonly PlassBreakpoint[];
|
|
21
|
+
/** A bare value means "from `xs` up"; a map is already per-breakpoint. */
|
|
22
|
+
export declare function breakpointMap<T>(value: PlassResponsive<T> | undefined): Partial<Record<PlassBreakpoint, T>>;
|
|
21
23
|
/**
|
|
22
24
|
* Turns a responsive value into the `--p-{name}-{breakpoint}` slots the CSS
|
|
23
25
|
* reads, emitting only the breakpoints the caller actually named.
|
package/dist/internal/grid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const breakpoints=["xs","sm","md","lg","xl"];export function
|
|
1
|
+
export const breakpoints=["xs","sm","md","lg","xl"];export function breakpointMap(t){return null==t?{}:"object"==typeof t?t:{xs:t}}export function responsiveSlots(t,e,n){const s=breakpointMap(e),o={};for(const e of breakpoints){const r=s[e];void 0!==r&&(o[`--p-${t}-${e}`]=n(r))}return o}export function withBaseline(t,e){return null==t?e:"object"==typeof t?{xs:e,...t}:t}export function columnCount(t){return String(Math.max(1,Math.round(t)))}export function columnUnits(t,e){return String(Math.max(e,Math.round(t)))}export const spanValue=t=>columnUnits(t,1);export const offsetValue=t=>columnUnits(t,0);export function spacingValue(t){const e=.25*Math.max(0,t);return`${Number(e.toFixed(5))}rem`}export const justifyClasses={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly",stretch:"justify-stretch"};export const alignItemsClasses={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"};export const alignContentClasses={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"};export const alignSelfClasses={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The shortcut vocabulary, read rather than written.
|
|
3
|
+
*
|
|
4
|
+
* `PlHotKeys` turns `Mod+Enter` into a pair of key caps; this turns the same
|
|
5
|
+
* string into a predicate over a real keyboard event. They are one file because
|
|
6
|
+
* a shortcut a component **displays** and a shortcut it **binds** have to be
|
|
7
|
+
* spelled the same way — otherwise the cap on the screen is a claim nobody
|
|
8
|
+
* checked. `PlCommandPalette` made that argument first and carried a private
|
|
9
|
+
* copy of the matcher to make it; the fields that take a `hotKeys` map are the
|
|
10
|
+
* reason it lives here instead, and `PlHotKeys` now reads the alias table and
|
|
11
|
+
* the platform out of this file rather than owning them.
|
|
12
|
+
*
|
|
13
|
+
* Nothing here is exported from `src/index.ts`. The one public name is
|
|
14
|
+
* `PlassHotKeys` in `src/types.ts`, which is the map a caller writes.
|
|
15
|
+
*/
|
|
16
|
+
import type * as React from 'react';
|
|
17
|
+
import type { PlassHotKeys } from '../types.js';
|
|
18
|
+
/** The three real platforms, once `auto` has been resolved. */
|
|
19
|
+
export type PlassOS = 'mac' | 'windows' | 'linux';
|
|
20
|
+
/**
|
|
21
|
+
* What the browser says it is running on.
|
|
22
|
+
*
|
|
23
|
+
* `userAgentData.platform` is the modern spelling and `navigator.platform` the
|
|
24
|
+
* deprecated one that every browser still answers; the user agent string is the
|
|
25
|
+
* last resort. All three are matched at once because the question here is coarse
|
|
26
|
+
* — which of three key caps to print, and which modifier `Mod` stands for — and
|
|
27
|
+
* getting it slightly wrong is a label, not a bug.
|
|
28
|
+
*/
|
|
29
|
+
export declare function detectOS(): PlassOS;
|
|
30
|
+
/**
|
|
31
|
+
* The spellings that mean the same key, folded onto one name.
|
|
32
|
+
*
|
|
33
|
+
* A caller writes what is printed on their own keyboard — `Cmd`, `Option`,
|
|
34
|
+
* `Return`, `Esc` — and every one of those has to reach the same cap and the
|
|
35
|
+
* same binding.
|
|
36
|
+
*/
|
|
37
|
+
export declare const keyAliases: Record<string, string>;
|
|
38
|
+
/** One token of a chord, folded: case, spacing and the aliases above. */
|
|
39
|
+
export declare function canonicalKey(token: string): string;
|
|
40
|
+
/**
|
|
41
|
+
* Only the parts of an event a chord is decided on, so the same matcher takes a
|
|
42
|
+
* React synthetic event and a DOM one without either being converted.
|
|
43
|
+
*/
|
|
44
|
+
export interface PlassKeyState {
|
|
45
|
+
key: string;
|
|
46
|
+
metaKey: boolean;
|
|
47
|
+
ctrlKey: boolean;
|
|
48
|
+
shiftKey: boolean;
|
|
49
|
+
altKey: boolean;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Does the chord carry a modifier a reader cannot type?
|
|
53
|
+
*
|
|
54
|
+
* `Mod`, `Ctrl`, `Meta` and `Alt` cannot appear in a text field's value, so a
|
|
55
|
+
* chord holding one of them is safe to answer wherever the focus happens to be.
|
|
56
|
+
* **Shift deliberately does not count**: `Shift+A` is how a capital A is typed.
|
|
57
|
+
*
|
|
58
|
+
* This is what lets a global binding be answered while somebody is writing an
|
|
59
|
+
* email without also stealing the letters out of it.
|
|
60
|
+
*/
|
|
61
|
+
export declare function hasHardModifier(chord: string): boolean;
|
|
62
|
+
/** Whether this key would have done something in a field. */
|
|
63
|
+
export declare function editsText(key: string): boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Whether the event landed somewhere a reader is entering text.
|
|
66
|
+
*
|
|
67
|
+
* A `<select>` counts: its own typeahead is how a reader picks an option, and a
|
|
68
|
+
* bare letter taken out from under it is a control that stops working. An
|
|
69
|
+
* `<input type="checkbox">` does not — nothing is being typed into it.
|
|
70
|
+
*/
|
|
71
|
+
export declare function isTypingTarget(target: EventTarget | null): boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Is this the chord?
|
|
74
|
+
*
|
|
75
|
+
* Every modifier is checked in **both** directions, which is the difference
|
|
76
|
+
* between binding a shortcut and binding a key: `'Enter'` must not fire on
|
|
77
|
+
* `Mod+Enter`, or a field that saves on Enter also saves on every chord that
|
|
78
|
+
* happens to end in one.
|
|
79
|
+
*/
|
|
80
|
+
export declare function matchesHotKey(event: PlassKeyState, chord: string): boolean;
|
|
81
|
+
/**
|
|
82
|
+
* The `onKeyDown` a control carrying a `hotKeys` map wears.
|
|
83
|
+
*
|
|
84
|
+
* `undefined` when there is nothing to bind and no handler to call, so a field
|
|
85
|
+
* with neither attaches no listener at all.
|
|
86
|
+
*
|
|
87
|
+
* The caller's own `onKeyDown` runs **first** and unconditionally: it is the
|
|
88
|
+
* lower-level hook and it should see every key, including the ones the map is
|
|
89
|
+
* about to claim. If it consumed the event — `preventDefault()` — the map is
|
|
90
|
+
* skipped, which is how a caller overrules one of their own bindings for a
|
|
91
|
+
* particular key without taking the map apart.
|
|
92
|
+
*/
|
|
93
|
+
export declare function hotKeyHandler<E extends Element>(hotKeys: PlassHotKeys | undefined, onKeyDown: React.KeyboardEventHandler<E> | undefined): React.KeyboardEventHandler<E> | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,t=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(t)?"mac":/win/i.test(t)?"windows":"linux"}export const keyAliases={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",numpadenter:"enter",esc:"escape",del:"delete",caps:"capslock"};export function canonicalKey(e){const t=e.toLowerCase().replace(/[\s_-]/g,"");return keyAliases[t]??t}const e={up:"arrowup",down:"arrowdown",left:"arrowleft",right:"arrowright",space:" ",plus:"+"};export function hasHardModifier(e){return e.split("+").slice(0,-1).map(canonicalKey).some(e=>"mod"===e||"ctrl"===e||"meta"===e||"alt"===e)}const t=new Set(["enter","backspace","delete","arrowleft","arrowright","arrowup","arrowdown","home","end","pageup","pagedown"]);export function editsText(e){return 1===e.length||t.has(e.toLowerCase())}export function isTypingTarget(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable)return!0;if("TEXTAREA"===e.tagName||"SELECT"===e.tagName)return!0;if("INPUT"===e.tagName){const t=e.type;return!["button","checkbox","color","file","image","radio","range","reset","submit"].includes(t)}return!1}export function matchesHotKey(t,r){const o=r.split("+").map(canonicalKey),a=new Set(o.slice(0,-1)),n=o[o.length-1],i=e[n]??n,c="mac"===detectOS()?t.metaKey:t.ctrlKey;return a.has("mod")===c&&a.has("shift")===t.shiftKey&&a.has("alt")===t.altKey&&!!(a.has("mod")||a.has("ctrl")===t.ctrlKey&&a.has("meta")===t.metaKey)&&t.key.toLowerCase()===i}export function hotKeyHandler(e,t){if(e||t)return r=>{if(t?.(r),e&&!r.defaultPrevented)for(const t of Object.keys(e))if(matchesHotKey(r,t))return r.preventDefault(),r.stopPropagation(),void e[t]()}}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The one query the library asks on its own behalf rather than the caller's.
|
|
3
|
+
*
|
|
4
|
+
* Named here rather than in `internal/animate.ts` because it is not only the
|
|
5
|
+
* animations' business: a loading indicator answers it the other way round —
|
|
6
|
+
* slowing rather than stopping, since a spinner that stopped would be lying
|
|
7
|
+
* about whether anything is happening.
|
|
8
|
+
*/
|
|
9
|
+
export declare const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
|
|
10
|
+
/**
|
|
11
|
+
* Whether the window matches `query` right now, re-rendering when it stops.
|
|
12
|
+
*
|
|
13
|
+
* `null` is a query that cannot be asked — the `xs` rung of a ladder whose
|
|
14
|
+
* floor is zero — and is always `false` rather than being a second code path at
|
|
15
|
+
* every call site.
|
|
16
|
+
*/
|
|
17
|
+
export declare function useMediaQuery(query: string | null): boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Whether the reader has asked their platform for less movement.
|
|
20
|
+
*
|
|
21
|
+
* A server has no reader and so no preference, which is the store's own answer
|
|
22
|
+
* and is the right one here: the markup that ships is the one with the motion
|
|
23
|
+
* in it, and a reader who asked for less gets it in the render after hydration
|
|
24
|
+
* — before any of these animations has had a frame to run in.
|
|
25
|
+
*/
|
|
26
|
+
export declare function usePrefersReducedMotion(): boolean;
|