@bouko/react 0.1.5 → 0.1.7

package/dist/assets/icons/chevron.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/components/select.d.ts

@@ -0,0 +1,2 @@
+import type { OptionField } from "../core/types";
+export default function Select({ style, label, required, value, options, update, note }: OptionField): import("react/jsx-runtime").JSX.Element;

package/dist/components/select.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import Chevron from "../assets/icons/chevron.svg";
+import { cn } from "@bouko/style";
+export default function Select({ style, label, required = true, value, options, update, note }) {
+    const [isOpen, setOpen] = useState(false);
+    const active = options.find(x => x.id === value);
+    const select = (x) => {
+        update(x);
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsxs("div", { className: styles.subcontainer, children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), _jsxs("div", { className: cn(styles.trigger, !active?.label && "capitalize"), onClick: () => setOpen(x => !x), children: [active ? active.label ?? active.id : "None", _jsx(Chevron, { className: cn("text-xs text-slate-400 duration-200", isOpen && "rotate-180") })] }), note && !isOpen && _jsx("span", { className: styles.note, children: note })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("span", { className: cn("w-full p-2 border-l-3 border-transparent hover:text-blue-600 duration-200 cursor-pointer", active?.id === id && "border-blue-600 bg-blue-500/10", !label && "capitalize"), onClick: () => select(id), children: label ?? id }, id))) }, "dropdown")) })] }));
+}
+const styles = {
+    container: "relative",
+    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 gap-1 w-full bg-slate-100 rounded border border-slate-300 py-1 text-xs max-h-46 overflow-y-auto",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/components/textarea.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, TextareaHTMLAttributes } from "react";
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    style?: string;
+    note?: ReactNode;
+};
+export default function TextArea({ style, label, required, note, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/textarea.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export default function TextArea({ style, label, required = true, note, ...props }) {
+    return (_jsxs("div", { className: cn(styles.container, style), children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), _jsx("textarea", { className: styles.textarea, ...props }), note && _jsx("span", { className: styles.note, children: note })] }));
+}
+const styles = {
+    container: "flex flex-col gap-1 overflow-hidden",
+    label: "text-xs text-slate-600",
+    textarea: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm resize-none",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-export { default as Button } from "./components/button";
 export { default as Input } from "./components/input";
+export { default as TextArea } from "./components/textarea";
+export { default as Select } from "./components/select";
 export { default as MultipleChoice } from "./components/mcq";
 export { default as Attachment } from "./components/attachment";
+export { default as Button } from "./components/button";
 export * from "./core/types";

package/dist/index.js

@@ -1,5 +1,7 @@
-export { default as Button } from "./components/button";
 export { default as Input } from "./components/input";
+export { default as TextArea } from "./components/textarea";
+export { default as Select } from "./components/select";
 export { default as MultipleChoice } from "./components/mcq";
 export { default as Attachment } from "./components/attachment";
+export { default as Button } from "./components/button";
 export * from "./core/types";

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -21,6 +21,7 @@
   "dependencies": {
     "@bouko/style": "^0.1.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.16.0",
     "tailwind-merge": "^3.3.0",
     "tailwind-variants": "^1.0.0"
   },