@bouko/react 0.3.1 → 0.3.3

package/dist/components/field.js

@@ -4,7 +4,7 @@ export default function Field({ style, label, required = true, note, children })
     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)" }) : ""] }), children, note && _jsx("span", { className: styles.note, children: note })] }));
 }
 const styles = {
-    container: "flex flex-col gap-1 overflow-hidden",
+    container: "flex flex-col shrink-0 gap-1 w-full 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/heading.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from "react";
 type Props = {
     container?: string;
+    icon?: ReactNode;
     title: ReactNode;
     subtitle: ReactNode;
     reverse?: boolean;
 };
-export default function Heading({ container, title, subtitle, reverse }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Heading({ container, icon, title, subtitle, reverse }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/heading.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ColumnBox } from "./flex";
+import { RowBox, ColumnBox } from "./flex";
 import { cn } from "@bouko/style";
-export default function Heading({ container, title, subtitle, reverse }) {
-    return (_jsxs(ColumnBox, { style: cn(container, reverse && "flex-col-reverse"), children: [_jsx("span", { className: styles.title, children: title }), _jsx("span", { className: styles.subtitle, children: subtitle })] }));
+export default function Heading({ container, icon, title, subtitle, reverse }) {
+    return (_jsxs(RowBox, { style: cn(container, styles.container), children: [icon, _jsxs(ColumnBox, { style: cn(styles.subcontainer, reverse && "flex-col-reverse"), children: [_jsx("span", { className: styles.title, children: title }), _jsx("span", { className: styles.subtitle, children: subtitle })] })] }));
 }
 const styles = {
+    container: "gap-2 items-center",
+    subcontainer: "grow",
     title: "flex items-center gap-2 font-bold",
     subtitle: "text-sm font-semibold text-primary-lighter"
 };

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.1",
+  "version": "0.3.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",