@bouko/react 3.1.1 → 3.1.2

package/dist/components/button/normal.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import type { Component } from "../../core/types";
 export type ButtonProps = Component & {
-    variant?: "accent" | "primary" | "outline" | "ghost" | "secondary" | "error" | "future";
+    variant?: "primary" | "outline" | "ghost" | "surface" | "error";
     size?: "xs" | "sm" | "md" | "lg";
     icon?: ReactNode;
     action?: () => void;

package/dist/components/button/normal.js

@@ -13,29 +13,27 @@ export function Button({ size, variant, style, icon, action, disabled, children
         catch { }
         setLoading(false);
     };
-    return (_jsxs("button", { className: cn(styles({ variant, size }), style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
+    return (_jsxs("button", { className: cn(styles({ variant, size }), variant === "ghost" && "p-0", style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
                 ? _jsx(Spinner, { className: "animate-spin" })
-                : icon, children, variant === "future" && _jsx("div", { className: "test-button-border" })] }));
+                : icon, children] }));
 }
 const styles = tv({
-    base: "relative flex justify-center items-center gap-2 border rounded font-medium duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-110",
-    defaultVariants: { variant: "accent", size: "md" },
+    base: "flex justify-center items-center gap-2 bg-accent border border-accent-darker rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-110",
+    defaultVariants: { size: "md" },
     variants: {
         variant: {
-            accent: "bg-accent border-accent-darker text-background-light",
             primary: "bg-primary border-primary-dark",
             outline: "bg-transparent border-accent hover:border-accent-dark text-primary",
-            ghost: "bg-transparent border-transparent text-primary hover:brightness-110",
-            secondary: "bg-background-dark dark:bg-background-light border-border-dark dark:border-border-light text-background-darker dark:text-primary",
-            error: "bg-error border-error-dark",
-            future: "rounded-lg text-primary border-transparent backdrop-blur-sm test-button"
+            ghost: "bg-transparent border-transparent text-accent hover:brightness-110",
+            surface: "bg-surface-dark border-border-dark dark:border-border-light text-primary-dark",
+            error: "bg-error border-error-dark"
         },
         size: {
-            xs: "gap-1 px-2 py-1 text-xs",
+            xs: "gap-1 px-2 py-1 text-xs font-medium",
             circle: "px-2 py-2 text-xs rounded-full",
             sm: "px-3 py-2 text-xs sm:text-sm",
-            md: "px-4 py-2 text-sm",
-            lg: "px-5 py-2 text-base"
+            md: "px-4 py-2",
+            lg: "px-5 py-3 text-lg"
         }
     }
 });

package/dist/components/input.js

@@ -32,7 +32,7 @@ export default function Input({ id, type = "text", variant, style, value, update
         else if (update)
             update(value);
     };
-    return (_jsx(Field, { ...props, children: _jsx("input", { type: type, className: cn(styles({ variant }), style), placeholder: placeholder, value: value, onChange: ({ target: { value } }) => handleUpdate(value), onKeyUp: ({ key }) => key === "Enter" && value ? onEnter?.(value) : null, disabled: disabled }) }));
+    return (_jsx(Field, { ...props, children: _jsx("input", { type: type, className: cn(styles({ variant }), style), placeholder: placeholder || `Enter ${id}`, value: value, onChange: ({ target: { value } }) => handleUpdate(value), onKeyUp: ({ key }) => key === "Enter" && value ? onEnter?.(value) : null, disabled: disabled }) }));
 }
 const styles = tv({
     base: "px-3 py-2 duration-200 rounded text-xs sm:text-sm placeholder:text-primary-darker text-primary disabled:brightness-90 disabled:cursor-not-allowed",

package/dist/components/upload/image.d.ts

@@ -1,12 +1,12 @@
-import { Dispatch, SetStateAction } from "react";
 type Props<T> = {
     id?: string;
     style?: string;
     placeholder?: string;
     value?: string;
     update?: (x: string) => void;
-    updateForm?: Dispatch<SetStateAction<T>>;
+    updateForm?: (id: string, x: string) => void;
     disabled?: boolean;
+    controls?: boolean;
 };
-export declare function ImageUploader<T>({ id, style, placeholder, value, update, updateForm, disabled }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ImageUploader<T>({ id, style, placeholder, value, update, updateForm, disabled, controls }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export default ImageUploader;

package/dist/components/upload/image.js

@@ -3,7 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@bouko/style";
 import Camera from "../../assets/icons/camera.svg";
-export function ImageUploader({ id, style, placeholder, value, update, updateForm, disabled = false }) {
+import Upload from "../../assets/icons/upload.svg";
+import Trash from "../../assets/icons/trash.svg";
+import { ColumnBox, RowBox } from "../layout/flex";
+import { Button } from "../button/normal";
+export function ImageUploader({ id, style, placeholder, value, update, updateForm, disabled = false, controls = false }) {
     const [preview, setPreview] = useState();
     useEffect(() => {
         if (value)
@@ -19,14 +23,14 @@ export function ImageUploader({ id, style, placeholder, value, update, updateFor
             return;
         const base64 = await fileToBase64(file);
         if (id && updateForm)
-            updateForm(x => ({ ...x, [id]: base64 }));
+            updateForm(id, base64);
         else
             update?.(base64);
     };
-    return (_jsxs("div", { className: cn(styles.container, style), onClick: uploadFile, children: [_jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref }), _jsx("img", { className: "absolute top-0 left-0 w-full h-full", src: preview || placeholder, alt: "Image Uploader" }), _jsx("div", { className: "flex justify-center items-center w-full h-full z-10 opacity-0 hover:opacity-50 bg-background-light/80 duration-200 cursor-pointer", children: _jsx(Camera, { className: "text-xl text-primary-light" }) })] }));
+    return (_jsxs(ColumnBox, { style: cn("gap-4", style), children: [_jsxs("div", { className: styles.container, onClick: !controls ? uploadFile : undefined, children: [_jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref }), _jsx("img", { className: "absolute top-0 left-0 w-full h-full", src: preview || placeholder, alt: "Image Uploader" }), !controls && _jsx("div", { className: "flex justify-center items-center w-full h-full z-10 opacity-0 hover:opacity-50 bg-background-light/80 duration-200 cursor-pointer", children: _jsx(Camera, { className: "text-xl text-primary-light" }) })] }), controls && _jsxs(RowBox, { style: "gap-1", children: [_jsxs(Button, { size: "xs", variant: "surface", action: uploadFile, children: [_jsx(Upload, {}), "Upload"] }), _jsxs(Button, { size: "xs", variant: "ghost", style: "!px-2 text-error", children: [_jsx(Trash, {}), "Clear"] })] })] }));
 }
 const styles = {
-    container: "relative shrink-0 border border-border rounded-md overflow-hidden",
+    container: "relative shrink-0 w-full aspect-square border border-border rounded-md overflow-hidden",
 };
 function fileToBase64(file) {
     return new Promise((resolve, reject) => {

package/package.json

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