@bouku/core 0.4.0 → 0.4.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.
|
@@ -25,10 +25,10 @@ export function Button({ style, size = "md", variant = "surface", icon, action,
|
|
|
25
25
|
: icon, children] }));
|
|
26
26
|
}
|
|
27
27
|
const styles = tv({
|
|
28
|
-
base: "relative flex justify-center items-center border outline-none rounded font-semibold duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-
|
|
28
|
+
base: "relative flex justify-center items-center border outline-none rounded font-semibold shadow duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-125",
|
|
29
29
|
variants: {
|
|
30
30
|
size: {
|
|
31
|
-
xs: "gap-
|
|
31
|
+
xs: "gap-2 px-3 py-2 text-xs",
|
|
32
32
|
sm: "gap-2 px-3 py-2 text-xs sm:text-sm",
|
|
33
33
|
md: "gap-2 px-4 py-2 text-xs sm:text-sm",
|
|
34
34
|
lg: "gap-3 px-5 py-3 text-base sm:text-lg"
|
|
@@ -2,7 +2,8 @@ import { type ReactNode } from "react";
|
|
|
2
2
|
interface Props {
|
|
3
3
|
trigger: ReactNode;
|
|
4
4
|
align?: "left" | "right";
|
|
5
|
+
direction?: "up" | "down";
|
|
5
6
|
children: ReactNode;
|
|
6
7
|
}
|
|
7
|
-
export declare function Dropdown({ trigger, align, children }: Props): import("react").JSX.Element;
|
|
8
|
+
export declare function Dropdown({ trigger, align, direction, children }: Props): import("react").JSX.Element;
|
|
8
9
|
export default Dropdown;
|
|
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react";
|
|
|
4
4
|
import { AnimatePresence, motion } from "framer-motion";
|
|
5
5
|
import { cn } from "../../../utils/functions/_.js";
|
|
6
6
|
;
|
|
7
|
-
export function Dropdown({ trigger, align = "left", children }) {
|
|
7
|
+
export function Dropdown({ trigger, align = "left", direction = "down", children }) {
|
|
8
8
|
const [isOpen, setOpen] = useState(false);
|
|
9
9
|
const ref = useRef(null);
|
|
10
10
|
useEffect(() => {
|
|
@@ -17,10 +17,12 @@ export function Dropdown({ trigger, align = "left", children }) {
|
|
|
17
17
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
18
18
|
};
|
|
19
19
|
}, []);
|
|
20
|
-
return (_jsxs("div", { ref: ref, className: styles.container, children: [_jsx("div", { onClick: () => setOpen(open => !open), children: trigger }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(styles.dropdown, align === "left" ? "left-0" : "right-0"
|
|
20
|
+
return (_jsxs("div", { ref: ref, className: styles.container, children: [_jsx("div", { onClick: () => setOpen(open => !open), children: trigger }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(styles.dropdown, align === "left" ? "left-0" : "right-0", direction === "down"
|
|
21
|
+
? "top-full mt-2"
|
|
22
|
+
: "bottom-full mb-2"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: children })) })] }));
|
|
21
23
|
}
|
|
22
24
|
const styles = {
|
|
23
25
|
container: "relative shrink-0",
|
|
24
|
-
dropdown: "absolute
|
|
26
|
+
dropdown: "absolute z-50 flex flex-col gap-2 min-w-full w-max bg-surface-darker rounded-md border border-border-darker p-2 text-sm shadow-md"
|
|
25
27
|
};
|
|
26
28
|
export default Dropdown;
|