@bouko/react 2.1.1 → 2.1.2

package/dist/components/form/index.d.ts

@@ -25,4 +25,4 @@ type Props<T> = FormSection<T> & {
     };
 };
 export declare function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
-export declare function FormBuilder<T>({ fields, validator, data, styles, update, submit, sound, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FormBuilder<T>({ fields, validator, data, styles, update, setField, submit, sound, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/index.js

@@ -20,7 +20,7 @@ export function useSound(filename) {
         return;
     return base(filename)[0];
 }
-export function FormBuilder({ fields, validator, data, styles, update, submit, sound, clear }) {
+export function FormBuilder({ fields, validator, data, styles, update, setField, submit, sound, clear }) {
     const isValid = validator.safeParse(data).success;
     const [isLoading, setLoading] = useState(false);
     const play = useSound(sound);
@@ -31,7 +31,7 @@ export function FormBuilder({ fields, validator, data, styles, update, submit, s
     };
     return (_jsxs("div", { className: cn("flex flex-col w-full gap-4", styles?.container), children: [fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, disabled, options, required, note }) => {
                     if (element === "input")
-                        return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: update, disabled: disabled, note: note, required: required }, id));
+                        return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: x => setField(id, x), disabled: disabled, note: note, required: required }, id));
                     else if (element === "select")
                         return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: update, note: note, required: required }, id));
                     else if (element === "textarea")

package/dist/components/form/types.d.ts

@@ -3,6 +3,7 @@ export type SetState<T> = Dispatch<SetStateAction<T>>;
 export type FormSection<T> = {
     data: T;
     update: SetState<T>;
+    setField: (name: string, value: T) => void;
     clear: () => void;
 };
 export type Field<T, K = string> = {

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
+export { default as FadeBox } from "./layout/fade";
 export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
+export { default as FadeBox } from "./layout/fade";
 export * from "./layout/flex";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";

package/dist/components/layout/fade.d.ts

@@ -0,0 +1,6 @@
+import { Component } from "../../core/types";
+type Props = Component & {
+    gradient?: string;
+};
+export default function FadeBox({ style, gradient, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/layout/fade.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+export default function FadeBox({ style, gradient, children }) {
+    const direction = "left";
+    return (_jsxs("div", { className: cn("relative", style), children: [children, _jsx("div", { className: cn(styles({ direction }), gradient) })] }));
+}
+const styles = tv({
+    base: "absolute from-background",
+    variants: {
+        direction: {
+            left: "top-0 right-0 w-12 h-full bg-gradient-to-l"
+        }
+    }
+});

package/dist/components/layout/heading.d.ts

@@ -25,4 +25,5 @@ export {};
  * Problems
  *
  * - Perfect `Badge`
+ * - Long `subtitle` style
 **/ 

package/dist/components/layout/heading.js

@@ -18,5 +18,5 @@ const base = {
     container: "items-center",
     badge: "mb-2",
     title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
-    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-primary-light dark:text-primary-dark"
+    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
 };

package/dist/components/search-bar.d.ts

@@ -1,9 +1,12 @@
-import { ReactElement } from "react";
-export type SearchBarProps = {
-    button?: ReactElement<{
-        onClick: (query: string) => void;
-    }>;
+type Props = {
+    style?: Styles;
     placeholder?: string;
     action: (query: string) => void;
 };
-export declare function SearchBar({ button, placeholder, action }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+type Styles = {
+    container?: string;
+    input?: string;
+    trigger: string;
+};
+export declare function SearchBar({ style, placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/search-bar.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useState } from "react";
+import { useState } from "react";
+import { cn } from "@bouko/style";
+import AnglesRight from "../assets/icons/angles-right.svg";
 import { RowBox } from "./layout/flex";
 import { Button } from "./button";
-export function SearchBar({ button, placeholder, action }) {
+export function SearchBar({ style, placeholder, action }) {
     const [query, search] = useState("");
-    return (_jsxs(RowBox, { style: styles.container, children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: "w-full outline-none text-lg placeholder-slate-500 tracking-wide", placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" })] }), button ? cloneElement(button, {
-                onClick: () => action(query)
-            }) : _jsx(Button, { size: "sm", style: "gap-[0.4rem] font-extrabold py-1 px-3 font-mono", onClick: () => action(query), children: "GO" })] }));
+    return (_jsxs(RowBox, { style: cn(styles.container, style?.container), children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: cn("w-full outline-none text-lg placeholder-slate-500 tracking-wide", style?.input), placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" })] }), _jsxs(Button, { size: "xs", style: cn("font-mono text-sm font-extrabold", style?.trigger), onClick: () => action(query), children: ["GO ", _jsx(AnglesRight, {})] })] }));
 }
 const styles = {
     container: "items-center gap-6 w-xl max-w-full pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"

package/package.json

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