@bouko/react 0.2.3 → 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/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,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",