@bouko/react 0.4.2 → 0.4.4

package/dist/components/attachment.js

@@ -12,7 +12,7 @@ export default function Attachment({ id, style, label, value, update, required =
     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",
+    container: "flex flex-col gap-2 w-full shrink-0 overflow-hidden",
     label: "text-xs text-slate-600",
     input: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm",
     note: "mt-1 text-xs text-slate-500"

package/dist/components/multiple-choice.d.ts

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

package/dist/components/multiple-choice.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Field from "./field";
+import { setField } from "@bouko/form";
 import { cn } from "@bouko/style";
-export default function MultipleChoice({ label, options, style, value, update, required = true }) {
-    return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => update(x.id) }), x.label] }, i))) }) }));
+export default function MultipleChoice({ id, label, options, style, value, update, required = true }) {
+    return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => setField(update, id, x.id) }), x.label] }, i))) }) }));
 }
 const Dot = ({ active, select }) => (_jsx("div", { className: cn(styles.dot, active && "bg-accent border-accent-dark"), onClick: select }));
 const styles = {

package/dist/components/select.js

@@ -15,7 +15,7 @@ export default function Select({ id, style, label, required = true, value, optio
     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",
+    container: "relative shrink-0 w-full",
     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",

package/dist/components/textarea.d.ts

@@ -1,8 +1,7 @@
-import type { ReactNode, TextareaHTMLAttributes } from "react";
-type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    label?: string;
-    style?: string;
-    note?: ReactNode;
+import { type Field as FieldProps } from "@bouko/form";
+type Props<T> = FieldProps<T> & {
+    rows?: number;
+    placeholder?: string;
 };
-export default function TextArea({ style, label, required, note, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function TextArea<T>({ id, style, label, required, note, update, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/textarea.js

@@ -1,7 +1,8 @@
-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 })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import Field from "./field";
+import { setField } from "@bouko/form";
+export default function TextArea({ id, style, label, required = true, note, update, ...props }) {
+    return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("textarea", { className: styles.textarea, onChange: ({ target: { value } }) => setField(update, id, value), ...props }) }));
 }
 const styles = {
     container: "flex flex-col gap-1 overflow-hidden",

package/package.json

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