@bouko/react 1.9.1 → 1.9.2

package/dist/components/dropdown/normal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type Option = {
+    label: ReactNode;
+    action: () => void;
+};
+export default function Dropdown({ options, children }: {
+    options: Option[];
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/dropdown/normal.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+export default function Dropdown({ options, children }) {
+    const [isOpen, setOpen] = useState(false);
+    const boom = (action) => {
+        action();
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { onClick: () => setOpen(true), children: children }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ label, action }, i) => (_jsx("div", { className: "cursor-pointer duration-200 hover:brightness-115", onClick: () => boom(action), children: label }, i))) }, "dropdown")) })] }));
+}
+const styles = {
+    container: "relative shrink-0",
+    subcontainer: "flex flex-col gap-1 w-full",
+    label: "text-xs text-slate-600",
+    trigger: "flex justify-between items-center px-3 py-2 bg-slate-200/50 hover:bg-slate-200/80 border border-slate-300 outline-blue-500 rounded text-sm duration-200 cursor-pointer",
+    dropdown: "absolute mt-2 z-50 flex flex-col items-end justify-end gap-1 w-full bg-slate-950 rounded border border-border-dark p-3 pr-4 text-sm max-h-46 overflow-y-auto"
+};

package/dist/components/form/index.js

@@ -33,5 +33,5 @@ export function FormBuilder({ fields, validator, data, styles, update, submit, c
                         return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: update, note: note, required: required }, id));
                     else if (element === "attachment")
                         return (_jsx(Attachment, { id: id, label: label, value: data[id], update: update, note: note, required: required }, id));
-                }) }, i))), _jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { style: cn("text-sm", styles?.submit), onClick: handleSubmit, children: [_jsx(Spinner, { className: isLoading ? "animate-spin" : "hidden" }), _jsx("div", { className: isLoading ? "hidden" : "", children: submit.icon || _jsx(CheckCircle, {}) }), submit.label || "Submit"] }), submit.cancel !== false && (_jsxs(Button, { style: cn("text-sm text-error hover:text-error-light", styles?.cancel), variant: "ghost", onClick: clear, children: [_jsx(XCircle, {}), "Cancel"] }))] })] }));
+                }) }, i))), _jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { style: cn("text-sm", styles?.submit), onClick: handleSubmit, disabled: !isValid, children: [_jsx(Spinner, { className: isLoading ? "animate-spin" : "hidden" }), _jsx("div", { className: isLoading ? "hidden" : "", children: submit.icon || _jsx(CheckCircle, {}) }), submit.label || "Submit"] }), submit.cancel !== false && (_jsxs(Button, { style: cn("text-sm text-error hover:text-error-light", styles?.cancel), variant: "ghost", onClick: clear, children: [_jsx(XCircle, {}), "Cancel"] }))] })] }));
 }

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Heading, HeadingProps } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";
 export * from "./list";
 export * from "./form";

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";
 export * from "./list";
 export * from "./form";

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",