@bouko/react 0.2.2 → 0.2.4

package/dist/assets/icons/check.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
+    <path 
+        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/components/attachment.d.ts

@@ -1,11 +1,2 @@
-import { type Dispatch, type SetStateAction } from "react";
-type Props = {
-    label?: string;
-    style?: string;
-    value?: File[];
-    required?: boolean;
-    update: Dispatch<SetStateAction<File[]>>;
-    note?: string;
-};
-export default function Attachment({ style, update, label, required, value, note }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import { type Field } from "@bouko/form";
+export default function Attachment<T>({ id, style, label, value, update, required, note }: Field<T, File[]>): import("react/jsx-runtime").JSX.Element;

package/dist/components/attachment.js

@@ -1,10 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
 import PaperClip from "../assets/icons/paperclip.svg";
+import { setField } from "@bouko/form";
 import { cn } from "@bouko/style";
-export default function Attachment({ style, update, label, required = true, value, note }) {
+export default function Attachment({ id, style, label, value, update, required = true, note }) {
     const ref = useRef(null);
-    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)" }) : ""] }), _jsxs("div", { onClick: () => ref.current?.click(), className: "flex flex-col justify-center items-center py-3 gap-1 w-full cursor-pointer duration-200 hover:bg-slate-200/40 rounded border-2 border-slate-300 border-dashed", children: [_jsxs("span", { className: "flex gap-2 items-center font-semibold text-sm", children: [_jsx(PaperClip, {}), "Drag and drop files, paste screenshots, or"] }), _jsx("span", { className: "text-xs text-slate-500", children: "browse" }), _jsx("input", { type: "file", className: "hidden", ref: ref })] }), note && _jsx("span", { className: styles.note, children: note })] }));
+    const handleFileChange = (e) => {
+        if (e.target.files)
+            setField(update, id, [e.target.files[0]]);
+    };
+    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)" }) : ""] }), _jsxs("div", { onClick: () => ref.current?.click(), className: "flex flex-col justify-center items-center py-3 gap-1 w-full cursor-pointer duration-200 hover:bg-slate-200/40 rounded border-2 border-slate-300 border-dashed", children: [!value || value.length === 0 && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex gap-2 items-center font-semibold text-sm", children: [_jsx(PaperClip, {}), "Drag and drop files, paste screenshots, or"] }), _jsx("span", { className: "text-xs text-slate-500", children: "browse" }), _jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref })] })), value && value.length > 0 && value.map((x, i) => (_jsx("span", { className: "text-xs text-slate-500", children: x.name }, i)))] }), note && _jsx("span", { className: styles.note, children: note })] }));
 }
 const styles = {
     container: "flex flex-col gap-2 overflow-hidden",

package/dist/components/checkbox.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    style?: string;
+    label: string;
+    value: boolean;
+    update: (x: boolean) => void;
+};
+export default function Checkbox({ style, label, value, update }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/checkbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Check from "@/assets/icons/check.svg";
+import { cn } from "@bouko/style";
+export default function Checkbox({ style, label, value, update }) {
+    const isChecked = !!value;
+    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsx("div", { className: cn(styles.box, isChecked && "bg-accent"), onClick: () => update(!isChecked), children: isChecked && _jsx(Check, { className: styles.check }) }), _jsx("span", { className: styles.label, children: label })] }));
+}
+const styles = {
+    container: "flex gap-3 items-center",
+    box: "flex justify-center items-center size-4 min-w-4 hover:bg-accent border rounded border-border-light duration-200 cursor-pointer",
+    check: "size-2 text-background",
+    label: "text-xs text-primary-dark"
+};

package/dist/index.d.ts

@@ -4,5 +4,6 @@ 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 { default as CheckBox } from "./components/checkbox";
 export * from "./components/flex";
 export * from "./core/types";

package/dist/index.js

@@ -4,5 +4,6 @@ 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 { default as CheckBox } from "./components/checkbox";
 export * from "./components/flex";
 export * from "./core/types";

package/package.json

@@ -1,50 +1,31 @@
 {
 
   "name": "@bouko/react",
-
-  "version": "0.2.2",
-
+  "version": "0.2.4",
   "main": "./dist/index.js",
-
   "types": "./dist/index.d.ts",
-
   "license": "MIT",
-
   "files": [
-
     "dist"
-
   ],
-
   "publishConfig": {
-
     "access": "public"
-
   },
-
   "author": "",
-
   "description": "",
 
   "scripts": {
-
     "build": "tsc"
-
   },
 
   "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"
+  },
 
-  }
-
-}
+  "devDependencies": {}
 
+}