@frontpage/weasel 1.2.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE.md +9 -0
  2. package/dist/index.d.mts +147 -0
  3. package/dist/index.d.ts +147 -0
  4. package/dist/index.js +1776 -0
  5. package/dist/index.mjs +1748 -0
  6. package/dist/style.css +259 -0
  7. package/package.json +73 -0
package/LICENSE.md ADDED
@@ -0,0 +1,9 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023 Emil Kowalski
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
+
7
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
+
9
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/dist/index.d.mts ADDED
@@ -0,0 +1,147 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
3
+ import * as React from 'react';
4
+
5
+ type SnapPointValue = number | string;
6
+ type SnapPoints = SnapPointValue[];
7
+ type ActiveSnapPoint = SnapPointValue | null;
8
+
9
+ interface WithFadeFromProps {
10
+ /**
11
+ * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
12
+ * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
13
+ * You can also use px values, which doesn't take screen height into account.
14
+ */
15
+ snapPoints: SnapPoints;
16
+ /**
17
+ * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
18
+ */
19
+ fadeFromIndex: number;
20
+ }
21
+ interface WithoutFadeFromProps {
22
+ /**
23
+ * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
24
+ * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
25
+ * You can also use px values, which doesn't take screen height into account.
26
+ */
27
+ snapPoints?: SnapPoints;
28
+ fadeFromIndex?: never;
29
+ }
30
+ type DialogProps = {
31
+ activeSnapPoint?: ActiveSnapPoint;
32
+ setActiveSnapPoint?: (snapPoint: ActiveSnapPoint) => void;
33
+ children?: React.ReactNode;
34
+ open?: boolean;
35
+ /**
36
+ * Number between 0 and 1 that determines when the drawer should be closed.
37
+ * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
38
+ * @default 0.25
39
+ */
40
+ closeThreshold?: number;
41
+ /**
42
+ * When `true` the `body` doesn't get any styles assigned from Weasel
43
+ */
44
+ noBodyStyles?: boolean;
45
+ onOpenChange?: (open: boolean) => void;
46
+ shouldScaleBackground?: boolean;
47
+ /**
48
+ * When `false` we don't change body's background color when the drawer is open.
49
+ * @default true
50
+ */
51
+ setBackgroundColorOnScale?: boolean;
52
+ /**
53
+ * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
54
+ * @default 500ms
55
+ */
56
+ scrollLockTimeout?: number;
57
+ /**
58
+ * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
59
+ */
60
+ fixed?: boolean;
61
+ /**
62
+ * When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
63
+ * @default false
64
+ */
65
+ handleOnly?: boolean;
66
+ /**
67
+ * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
68
+ * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
69
+ * @default true
70
+ */
71
+ dismissible?: boolean;
72
+ onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
73
+ onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
74
+ /**
75
+ * When `false` it allows to interact with elements outside of the drawer without closing it.
76
+ * @default true
77
+ */
78
+ modal?: boolean;
79
+ nested?: boolean;
80
+ onClose?: () => void;
81
+ /**
82
+ * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
83
+ * @default 'bottom'
84
+ */
85
+ direction?: 'top' | 'bottom' | 'left' | 'right';
86
+ /**
87
+ * Opened by default, skips initial enter animation. Still reacts to `open` state changes
88
+ * @default false
89
+ */
90
+ defaultOpen?: boolean;
91
+ /**
92
+ * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
93
+ * @default false
94
+ */
95
+ disablePreventScroll?: boolean;
96
+ /**
97
+ * When `true` Weasel will reposition inputs rather than scroll then into view if the keyboard is in the way.
98
+ * Setting it to `false` will fall back to the default browser behavior.
99
+ * @default true when {@link snapPoints} is defined
100
+ */
101
+ repositionInputs?: boolean;
102
+ /**
103
+ * Disabled velocity based swiping for snap points.
104
+ * This means that a snap point won't be skipped even if the velocity is high enough.
105
+ * Useful if each snap point in a drawer is equally important.
106
+ * @default false
107
+ */
108
+ snapToSequentialPoint?: boolean;
109
+ container?: HTMLElement | null;
110
+ /**
111
+ * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
112
+ * Useful to revert any state changes for example.
113
+ */
114
+ onAnimationEnd?: (open: boolean) => void;
115
+ preventScrollRestoration?: boolean;
116
+ autoFocus?: boolean;
117
+ } & (WithFadeFromProps | WithoutFadeFromProps);
118
+ declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): react_jsx_runtime.JSX.Element;
119
+ declare const Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
120
+ type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
121
+ declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
122
+ type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
123
+ preventCycle?: boolean;
124
+ };
125
+ declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
126
+ preventCycle?: boolean;
127
+ } & React.RefAttributes<HTMLDivElement>>;
128
+ declare function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps): react_jsx_runtime.JSX.Element;
129
+ type PortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
130
+ declare function Portal(props: PortalProps): react_jsx_runtime.JSX.Element;
131
+ declare const Drawer: {
132
+ Root: typeof Root;
133
+ NestedRoot: typeof NestedRoot;
134
+ Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
135
+ Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
136
+ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
137
+ Portal: typeof Portal;
138
+ Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
139
+ preventCycle?: boolean;
140
+ } & React.RefAttributes<HTMLDivElement>>;
141
+ Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
142
+ Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
143
+ Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
144
+ };
145
+
146
+ export { Content, Drawer, Handle, NestedRoot, Overlay, Portal, Root };
147
+ export type { ContentProps, DialogProps, HandleProps, WithFadeFromProps, WithoutFadeFromProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,147 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
3
+ import * as React from 'react';
4
+
5
+ type SnapPointValue = number | string;
6
+ type SnapPoints = SnapPointValue[];
7
+ type ActiveSnapPoint = SnapPointValue | null;
8
+
9
+ interface WithFadeFromProps {
10
+ /**
11
+ * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
12
+ * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
13
+ * You can also use px values, which doesn't take screen height into account.
14
+ */
15
+ snapPoints: SnapPoints;
16
+ /**
17
+ * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
18
+ */
19
+ fadeFromIndex: number;
20
+ }
21
+ interface WithoutFadeFromProps {
22
+ /**
23
+ * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
24
+ * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
25
+ * You can also use px values, which doesn't take screen height into account.
26
+ */
27
+ snapPoints?: SnapPoints;
28
+ fadeFromIndex?: never;
29
+ }
30
+ type DialogProps = {
31
+ activeSnapPoint?: ActiveSnapPoint;
32
+ setActiveSnapPoint?: (snapPoint: ActiveSnapPoint) => void;
33
+ children?: React.ReactNode;
34
+ open?: boolean;
35
+ /**
36
+ * Number between 0 and 1 that determines when the drawer should be closed.
37
+ * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
38
+ * @default 0.25
39
+ */
40
+ closeThreshold?: number;
41
+ /**
42
+ * When `true` the `body` doesn't get any styles assigned from Weasel
43
+ */
44
+ noBodyStyles?: boolean;
45
+ onOpenChange?: (open: boolean) => void;
46
+ shouldScaleBackground?: boolean;
47
+ /**
48
+ * When `false` we don't change body's background color when the drawer is open.
49
+ * @default true
50
+ */
51
+ setBackgroundColorOnScale?: boolean;
52
+ /**
53
+ * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
54
+ * @default 500ms
55
+ */
56
+ scrollLockTimeout?: number;
57
+ /**
58
+ * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
59
+ */
60
+ fixed?: boolean;
61
+ /**
62
+ * When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
63
+ * @default false
64
+ */
65
+ handleOnly?: boolean;
66
+ /**
67
+ * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
68
+ * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
69
+ * @default true
70
+ */
71
+ dismissible?: boolean;
72
+ onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
73
+ onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
74
+ /**
75
+ * When `false` it allows to interact with elements outside of the drawer without closing it.
76
+ * @default true
77
+ */
78
+ modal?: boolean;
79
+ nested?: boolean;
80
+ onClose?: () => void;
81
+ /**
82
+ * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
83
+ * @default 'bottom'
84
+ */
85
+ direction?: 'top' | 'bottom' | 'left' | 'right';
86
+ /**
87
+ * Opened by default, skips initial enter animation. Still reacts to `open` state changes
88
+ * @default false
89
+ */
90
+ defaultOpen?: boolean;
91
+ /**
92
+ * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
93
+ * @default false
94
+ */
95
+ disablePreventScroll?: boolean;
96
+ /**
97
+ * When `true` Weasel will reposition inputs rather than scroll then into view if the keyboard is in the way.
98
+ * Setting it to `false` will fall back to the default browser behavior.
99
+ * @default true when {@link snapPoints} is defined
100
+ */
101
+ repositionInputs?: boolean;
102
+ /**
103
+ * Disabled velocity based swiping for snap points.
104
+ * This means that a snap point won't be skipped even if the velocity is high enough.
105
+ * Useful if each snap point in a drawer is equally important.
106
+ * @default false
107
+ */
108
+ snapToSequentialPoint?: boolean;
109
+ container?: HTMLElement | null;
110
+ /**
111
+ * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
112
+ * Useful to revert any state changes for example.
113
+ */
114
+ onAnimationEnd?: (open: boolean) => void;
115
+ preventScrollRestoration?: boolean;
116
+ autoFocus?: boolean;
117
+ } & (WithFadeFromProps | WithoutFadeFromProps);
118
+ declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): react_jsx_runtime.JSX.Element;
119
+ declare const Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
120
+ type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
121
+ declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
122
+ type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
123
+ preventCycle?: boolean;
124
+ };
125
+ declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
126
+ preventCycle?: boolean;
127
+ } & React.RefAttributes<HTMLDivElement>>;
128
+ declare function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps): react_jsx_runtime.JSX.Element;
129
+ type PortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
130
+ declare function Portal(props: PortalProps): react_jsx_runtime.JSX.Element;
131
+ declare const Drawer: {
132
+ Root: typeof Root;
133
+ NestedRoot: typeof NestedRoot;
134
+ Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
135
+ Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
136
+ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
137
+ Portal: typeof Portal;
138
+ Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
139
+ preventCycle?: boolean;
140
+ } & React.RefAttributes<HTMLDivElement>>;
141
+ Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
142
+ Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
143
+ Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
144
+ };
145
+
146
+ export { Content, Drawer, Handle, NestedRoot, Overlay, Portal, Root };
147
+ export type { ContentProps, DialogProps, HandleProps, WithFadeFromProps, WithoutFadeFromProps };