@bouko/react 0.3.2 → 0.3.4

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 type Props = {
-    variant?: "ghost";
+    variant?: "primary" | "ghost";
     style?: string;
     onClick?: () => void;
     children: ReactNode;

package/dist/components/button.js

@@ -7,6 +7,7 @@ const styles = tv({
     base: "px-4 py-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-primary duration-200 cursor-pointer",
     variants: {
         variant: {
+            primary: "bg-primary hover:bg-primary-dark border-primary-dark text-background",
             ghost: "bg-transparent border-transparent"
         }
     }

package/dist/components/select.d.ts

@@ -1,2 +1,6 @@
-import type { OptionField } from "../core/types";
-export default function Select({ style, label, required, value, options, update, note }: OptionField): import("react/jsx-runtime").JSX.Element;
+import { type OptionField } from "@bouko/form";
+type Props<T> = OptionField<T> & {
+    placeholder?: string;
+};
+export default function Select<T>({ id, style, label, required, value, options, update, note }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/select.js

@@ -3,12 +3,13 @@ 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 { setField } from "@bouko/form";
 import { cn } from "@bouko/style";
-export default function Select({ style, label, required = true, value, options, update, note }) {
+export default function Select({ id, 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);
+        setField(update, id, 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")) })] }));

package/package.json

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