@sikka/hawa 0.21.12-next → 0.21.13-next
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/dist/accordion/index.mjs +4 -2
- package/dist/chunk-L55L4HKN.mjs +53 -0
- package/dist/chunk-LZAC5DLW.mjs +140 -0
- package/dist/chunk-OLJSILJM.mjs +216 -0
- package/dist/{chunk-U2ZNJ3FC.mjs → chunk-SMZ7Z4DO.mjs} +473 -659
- package/dist/hooks/index.d.mts +7 -0
- package/dist/hooks/index.d.ts +7 -0
- package/dist/hooks/index.js +387 -0
- package/dist/hooks/index.mjs +2 -0
- package/dist/index-r02I_JX2.d.ts +122 -0
- package/dist/index-w6ivmLAx.d.mts +122 -0
- package/dist/index.d.mts +129 -261
- package/dist/index.d.ts +129 -261
- package/dist/index.mjs +326 -532
- package/dist/splitButton/index.mjs +1 -1
- package/dist/tooltip/index.d.mts +26 -0
- package/dist/tooltip/index.d.ts +26 -0
- package/dist/tooltip/index.js +85 -0
- package/dist/tooltip/index.mjs +2 -0
- package/package.json +1 -1
package/dist/accordion/index.mjs
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
export { Accordion, AccordionContent, AccordionTrigger } from '../chunk-
|
|
1
|
+
export { Accordion, AccordionContent, AccordionTrigger } from '../chunk-SMZ7Z4DO.mjs';
|
|
2
2
|
import '../chunk-NFLMC26M.mjs';
|
|
3
|
+
import '../chunk-L55L4HKN.mjs';
|
|
4
|
+
import '../chunk-LZAC5DLW.mjs';
|
|
3
5
|
import '../chunk-J5NJEHQU.mjs';
|
|
6
|
+
import '../chunk-C4CBXIG5.mjs';
|
|
4
7
|
import '../chunk-PUQV6URH.mjs';
|
|
5
8
|
import '../chunk-ENZDFGFY.mjs';
|
|
6
|
-
import '../chunk-C4CBXIG5.mjs';
|
|
7
9
|
import { cn } from '../chunk-TE3BKEXL.mjs';
|
|
8
10
|
import * as React from 'react';
|
|
9
11
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { cn } from './chunk-TE3BKEXL.mjs';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
4
|
+
|
|
5
|
+
var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
6
|
+
TooltipPrimitive.Content,
|
|
7
|
+
{
|
|
8
|
+
ref,
|
|
9
|
+
sideOffset,
|
|
10
|
+
className: cn(
|
|
11
|
+
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
|
|
12
|
+
className
|
|
13
|
+
),
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
));
|
|
17
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
18
|
+
var TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
|
|
19
|
+
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
|
|
20
|
+
var Tooltip = ({
|
|
21
|
+
side,
|
|
22
|
+
open,
|
|
23
|
+
content,
|
|
24
|
+
children,
|
|
25
|
+
defaultOpen,
|
|
26
|
+
onOpenChange,
|
|
27
|
+
triggerProps,
|
|
28
|
+
contentProps,
|
|
29
|
+
providerProps,
|
|
30
|
+
delayDuration = 300,
|
|
31
|
+
...props
|
|
32
|
+
}) => {
|
|
33
|
+
return /* @__PURE__ */ React.createElement(
|
|
34
|
+
TooltipPrimitive.TooltipProvider,
|
|
35
|
+
{
|
|
36
|
+
delayDuration,
|
|
37
|
+
...providerProps
|
|
38
|
+
},
|
|
39
|
+
/* @__PURE__ */ React.createElement(
|
|
40
|
+
TooltipPrimitive.Root,
|
|
41
|
+
{
|
|
42
|
+
open,
|
|
43
|
+
defaultOpen,
|
|
44
|
+
onOpenChange,
|
|
45
|
+
...props
|
|
46
|
+
},
|
|
47
|
+
/* @__PURE__ */ React.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
|
|
48
|
+
/* @__PURE__ */ React.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
|
|
49
|
+
)
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export { Tooltip };
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
|
|
4
|
+
// components/hooks/useClipboard.ts
|
|
5
|
+
function useClipboard({ timeout = 2e3 } = {}) {
|
|
6
|
+
const [error, setError] = useState(null);
|
|
7
|
+
const [copied, setCopied] = useState(false);
|
|
8
|
+
const [copyTimeout, setCopyTimeout] = useState(null);
|
|
9
|
+
const handleCopyResult = (value) => {
|
|
10
|
+
clearTimeout(copyTimeout);
|
|
11
|
+
setCopyTimeout(setTimeout(() => setCopied(false), timeout));
|
|
12
|
+
setCopied(value);
|
|
13
|
+
};
|
|
14
|
+
const copy = (valueToCopy) => {
|
|
15
|
+
if ("clipboard" in navigator) {
|
|
16
|
+
navigator.clipboard.writeText(valueToCopy).then(() => handleCopyResult(true)).catch((err) => setError(err));
|
|
17
|
+
} else {
|
|
18
|
+
setError(new Error("useClipboard: navigator.clipboard is not supported"));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const reset = () => {
|
|
22
|
+
setCopied(false);
|
|
23
|
+
setError(null);
|
|
24
|
+
clearTimeout(copyTimeout);
|
|
25
|
+
};
|
|
26
|
+
return { copy, reset, error, copied };
|
|
27
|
+
}
|
|
28
|
+
var TOAST_LIMIT = 5;
|
|
29
|
+
var TOAST_REMOVE_DELAY = 1e5;
|
|
30
|
+
var count = 0;
|
|
31
|
+
function genId() {
|
|
32
|
+
count = (count + 1) % Number.MAX_VALUE;
|
|
33
|
+
return count.toString();
|
|
34
|
+
}
|
|
35
|
+
var toastTimeouts = /* @__PURE__ */ new Map();
|
|
36
|
+
var addToRemoveQueue = (toastId) => {
|
|
37
|
+
if (toastTimeouts.has(toastId)) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
const timeout = setTimeout(() => {
|
|
41
|
+
toastTimeouts.delete(toastId);
|
|
42
|
+
dispatch({
|
|
43
|
+
type: "REMOVE_TOAST",
|
|
44
|
+
toastId
|
|
45
|
+
});
|
|
46
|
+
}, TOAST_REMOVE_DELAY);
|
|
47
|
+
toastTimeouts.set(toastId, timeout);
|
|
48
|
+
};
|
|
49
|
+
var reducer = (state, action) => {
|
|
50
|
+
switch (action.type) {
|
|
51
|
+
case "ADD_TOAST":
|
|
52
|
+
return {
|
|
53
|
+
...state,
|
|
54
|
+
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
|
|
55
|
+
};
|
|
56
|
+
case "UPDATE_TOAST":
|
|
57
|
+
return {
|
|
58
|
+
...state,
|
|
59
|
+
toasts: state.toasts.map(
|
|
60
|
+
(t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
|
|
61
|
+
)
|
|
62
|
+
};
|
|
63
|
+
case "DISMISS_TOAST": {
|
|
64
|
+
const { toastId } = action;
|
|
65
|
+
if (toastId) {
|
|
66
|
+
addToRemoveQueue(toastId);
|
|
67
|
+
} else {
|
|
68
|
+
state.toasts.forEach((toast2) => {
|
|
69
|
+
addToRemoveQueue(toast2.id);
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
return {
|
|
73
|
+
...state,
|
|
74
|
+
toasts: state.toasts.map(
|
|
75
|
+
(t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t
|
|
76
|
+
)
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
case "REMOVE_TOAST":
|
|
80
|
+
if (action.toastId === void 0) {
|
|
81
|
+
return { ...state, toasts: [] };
|
|
82
|
+
}
|
|
83
|
+
return {
|
|
84
|
+
...state,
|
|
85
|
+
toasts: state.toasts.filter((t) => t.id !== action.toastId)
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
var listeners = [];
|
|
90
|
+
var memoryState = { toasts: [] };
|
|
91
|
+
function dispatch(action) {
|
|
92
|
+
memoryState = reducer(memoryState, action);
|
|
93
|
+
listeners.forEach((listener) => {
|
|
94
|
+
listener(memoryState);
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
function toast({ ...props }) {
|
|
98
|
+
const id = genId();
|
|
99
|
+
const update = (props2) => dispatch({
|
|
100
|
+
type: "UPDATE_TOAST",
|
|
101
|
+
toast: { ...props2, id }
|
|
102
|
+
});
|
|
103
|
+
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
|
|
104
|
+
dispatch({
|
|
105
|
+
type: "ADD_TOAST",
|
|
106
|
+
toast: {
|
|
107
|
+
...props,
|
|
108
|
+
id,
|
|
109
|
+
open: true,
|
|
110
|
+
onOpenChange: (open) => {
|
|
111
|
+
if (!open)
|
|
112
|
+
dismiss();
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
return {
|
|
117
|
+
id,
|
|
118
|
+
dismiss,
|
|
119
|
+
update
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
function useToast() {
|
|
123
|
+
const [state, setState] = React.useState(memoryState);
|
|
124
|
+
React.useEffect(() => {
|
|
125
|
+
listeners.push(setState);
|
|
126
|
+
return () => {
|
|
127
|
+
const index = listeners.indexOf(setState);
|
|
128
|
+
if (index > -1) {
|
|
129
|
+
listeners.splice(index, 1);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
}, [state]);
|
|
133
|
+
return {
|
|
134
|
+
...state,
|
|
135
|
+
toast,
|
|
136
|
+
dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
export { reducer, toast, useClipboard, useToast };
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
import { useLayoutEffect, useEffect, useState, useRef } from 'react';
|
|
2
|
+
import AutoHeight from 'embla-carousel-auto-height';
|
|
3
|
+
import useEmblaCarousel from 'embla-carousel-react';
|
|
4
|
+
|
|
5
|
+
// components/hooks/useIsomorphicEffect.ts
|
|
6
|
+
var useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
|
|
7
|
+
var useDialogCarousel = (options) => {
|
|
8
|
+
const [emblaRef, emblaApi] = useEmblaCarousel(
|
|
9
|
+
{ loop: false, watchDrag: false, startIndex: 0, ...options },
|
|
10
|
+
[AutoHeight({ destroyHeight: "fit", active: true })]
|
|
11
|
+
);
|
|
12
|
+
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
|
13
|
+
const checkCanScrollPrev = () => {
|
|
14
|
+
if (emblaApi) {
|
|
15
|
+
setCanScrollPrev(emblaApi.canScrollPrev());
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
const nextStep = () => {
|
|
19
|
+
if (emblaApi) {
|
|
20
|
+
console.log("going to NEXT \u{1F449}");
|
|
21
|
+
emblaApi.scrollNext();
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const prevStep = () => {
|
|
25
|
+
if (emblaApi) {
|
|
26
|
+
console.log("going to BACK \u{1F448}");
|
|
27
|
+
emblaApi.scrollPrev();
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
checkCanScrollPrev();
|
|
32
|
+
emblaApi && emblaApi.on("select", checkCanScrollPrev);
|
|
33
|
+
return () => {
|
|
34
|
+
emblaApi && emblaApi.off("select", checkCanScrollPrev);
|
|
35
|
+
};
|
|
36
|
+
}, [emblaApi]);
|
|
37
|
+
return {
|
|
38
|
+
emblaRef,
|
|
39
|
+
emblaApi,
|
|
40
|
+
nextStep,
|
|
41
|
+
prevStep,
|
|
42
|
+
canScrollPrev
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
|
|
46
|
+
const [currentStep, setCurrentStep] = useState(initialStep);
|
|
47
|
+
const [dialogHeight, setDialogHeight] = useState(null);
|
|
48
|
+
const visibleStepRef = useRef(null);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (visibleStepRef.current) {
|
|
51
|
+
setDialogHeight(visibleStepRef.current.offsetHeight);
|
|
52
|
+
}
|
|
53
|
+
}, [currentStep, setOpenDialog]);
|
|
54
|
+
const handleNext = () => {
|
|
55
|
+
const currentIndex = stepIds.indexOf(currentStep);
|
|
56
|
+
if (currentIndex < stepIds.length - 1) {
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
setCurrentStep(stepIds[currentIndex + 1]);
|
|
59
|
+
}, 100);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const handleBack = () => {
|
|
63
|
+
const currentIndex = stepIds.indexOf(currentStep);
|
|
64
|
+
if (currentIndex > 0) {
|
|
65
|
+
setTimeout(() => {
|
|
66
|
+
setCurrentStep(stepIds[currentIndex - 1]);
|
|
67
|
+
}, 100);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
return {
|
|
71
|
+
currentStep,
|
|
72
|
+
dialogHeight,
|
|
73
|
+
visibleStepRef,
|
|
74
|
+
handleNext,
|
|
75
|
+
handleBack
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
var useBreakpoint = () => {
|
|
79
|
+
const [breakpoint, setBreakpoint] = useState(null);
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (typeof window !== "undefined") {
|
|
82
|
+
const resize = () => {
|
|
83
|
+
setBreakpoint(window.innerWidth);
|
|
84
|
+
};
|
|
85
|
+
resize();
|
|
86
|
+
window.addEventListener("resize", resize);
|
|
87
|
+
return () => {
|
|
88
|
+
window.removeEventListener("resize", resize);
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
}, []);
|
|
92
|
+
return breakpoint;
|
|
93
|
+
};
|
|
94
|
+
var useWindowSize = () => {
|
|
95
|
+
const [windowSize, setWindowSize] = useState({
|
|
96
|
+
width: void 0,
|
|
97
|
+
height: void 0
|
|
98
|
+
});
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
function handleResize() {
|
|
101
|
+
setWindowSize({
|
|
102
|
+
width: window.innerWidth,
|
|
103
|
+
height: window.innerHeight
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
window.addEventListener("resize", handleResize);
|
|
107
|
+
handleResize();
|
|
108
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
109
|
+
}, []);
|
|
110
|
+
return windowSize;
|
|
111
|
+
};
|
|
112
|
+
function containsRelatedTarget(event) {
|
|
113
|
+
if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
|
|
114
|
+
return event.currentTarget.contains(event.relatedTarget);
|
|
115
|
+
}
|
|
116
|
+
return false;
|
|
117
|
+
}
|
|
118
|
+
function useFocusWithin({
|
|
119
|
+
onBlur,
|
|
120
|
+
onFocus
|
|
121
|
+
} = {}) {
|
|
122
|
+
const ref = useRef(null);
|
|
123
|
+
const [focused, _setFocused] = useState(false);
|
|
124
|
+
const focusedRef = useRef(false);
|
|
125
|
+
const setFocused = (value) => {
|
|
126
|
+
_setFocused(value);
|
|
127
|
+
focusedRef.current = value;
|
|
128
|
+
};
|
|
129
|
+
const handleFocusIn = (event) => {
|
|
130
|
+
if (!focusedRef.current) {
|
|
131
|
+
setFocused(true);
|
|
132
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
const handleFocusOut = (event) => {
|
|
136
|
+
if (focusedRef.current && !containsRelatedTarget(event)) {
|
|
137
|
+
setFocused(false);
|
|
138
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
useEffect(() => {
|
|
142
|
+
if (ref.current) {
|
|
143
|
+
ref.current.addEventListener("focusin", handleFocusIn);
|
|
144
|
+
ref.current.addEventListener("focusout", handleFocusOut);
|
|
145
|
+
return () => {
|
|
146
|
+
var _a, _b;
|
|
147
|
+
(_a = ref.current) == null ? void 0 : _a.removeEventListener("focusin", handleFocusIn);
|
|
148
|
+
(_b = ref.current) == null ? void 0 : _b.removeEventListener("focusout", handleFocusOut);
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
return void 0;
|
|
152
|
+
}, [handleFocusIn, handleFocusOut]);
|
|
153
|
+
return { ref, focused };
|
|
154
|
+
}
|
|
155
|
+
function attachMediaListener(query, callback) {
|
|
156
|
+
try {
|
|
157
|
+
query.addEventListener("change", callback);
|
|
158
|
+
return () => query.removeEventListener("change", callback);
|
|
159
|
+
} catch (e) {
|
|
160
|
+
query.addListener(callback);
|
|
161
|
+
return () => query.removeListener(callback);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
function getInitialValue(query, initialValue) {
|
|
165
|
+
if (typeof initialValue === "boolean") {
|
|
166
|
+
return initialValue;
|
|
167
|
+
}
|
|
168
|
+
if (typeof window !== "undefined" && "matchMedia" in window) {
|
|
169
|
+
return window.matchMedia(query).matches;
|
|
170
|
+
}
|
|
171
|
+
return false;
|
|
172
|
+
}
|
|
173
|
+
function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
|
|
174
|
+
getInitialValueInEffect: true
|
|
175
|
+
}) {
|
|
176
|
+
const [matches, setMatches] = useState(
|
|
177
|
+
getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
|
|
178
|
+
);
|
|
179
|
+
const queryRef = useRef();
|
|
180
|
+
useEffect(() => {
|
|
181
|
+
if ("matchMedia" in window) {
|
|
182
|
+
queryRef.current = window.matchMedia(query);
|
|
183
|
+
setMatches(queryRef.current.matches);
|
|
184
|
+
return attachMediaListener(
|
|
185
|
+
queryRef.current,
|
|
186
|
+
(event) => setMatches(event.matches)
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
return void 0;
|
|
190
|
+
}, [query]);
|
|
191
|
+
return matches;
|
|
192
|
+
}
|
|
193
|
+
function useTabs(initialTab = "") {
|
|
194
|
+
const [activeTab, setActiveTab] = useState(initialTab);
|
|
195
|
+
useEffect(() => {
|
|
196
|
+
const handleHashChange = () => {
|
|
197
|
+
const hash = window.location.hash.substring(1);
|
|
198
|
+
setActiveTab(hash || initialTab);
|
|
199
|
+
};
|
|
200
|
+
window.addEventListener("hashchange", handleHashChange);
|
|
201
|
+
handleHashChange();
|
|
202
|
+
return () => {
|
|
203
|
+
window.removeEventListener("hashchange", handleHashChange);
|
|
204
|
+
};
|
|
205
|
+
}, [initialTab]);
|
|
206
|
+
const handleTabChange = (index) => {
|
|
207
|
+
setActiveTab(index);
|
|
208
|
+
window.location.hash = index;
|
|
209
|
+
};
|
|
210
|
+
return {
|
|
211
|
+
activeTab,
|
|
212
|
+
handleTabChange
|
|
213
|
+
};
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
export { useBreakpoint, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMediaQuery, useMultiStepDialog, useTabs, useWindowSize };
|