@bouko/react 3.0.2 → 3.0.3

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?: "primary" | "outline" | "ghost" | "secondary" | "error" | "future";
+    variant?: "accent" | "primary" | "outline" | "ghost" | "secondary" | "error" | "future";
     size?: "xs" | "sm" | "md" | "lg";
     icon?: ReactNode;
     action?: () => void;

package/dist/components/button/normal.js

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

package/dist/styles.css

@@ -2,6 +2,8 @@
   position: relative;
   box-sizing: border-box;
   display: flex;
+  gap: 0.5rem;
+  align-items: center;
   width: max-content;
   padding: 8px 16px;
   border-radius: 8px;

package/package.json

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