@bouko/react 3.0.4 → 3.0.5

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

@@ -1,2 +1,6 @@
 import type { Clickable } from "../../core/types";
-export default function IconButton({ style, color, icon, action, disabled }: Clickable): import("react/jsx-runtime").JSX.Element;
+type Props = Clickable & {
+    variant?: "accent" | "primary" | "outline" | "ghost" | "secondary" | "error" | "future";
+};
+export declare function IconButton({ variant, style, icon, action, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/components/button/icon.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
 import Check from "../../assets/icons/check.svg";
-import { cn, opacitize } from "@bouko/style";
-export default function IconButton({ style, color = "--color-accent", icon, action, disabled = false }) {
-    return (_jsx("button", { className: cn("flex hover:brightness-115 disabled:!cursor-not-allowed", style), style: styles(color), onClick: action, disabled: !action || disabled, children: icon || _jsx(Check, {}) }));
+export function IconButton({ variant, style, icon, action, disabled = false }) {
+    return (_jsx("button", { className: cn(styles({ variant }), style), onClick: action, disabled: !action || disabled, children: icon || _jsx(Check, {}) }));
 }
-const styles = (color) => ({
-    justifyContent: "center",
-    itemsCenter: "center",
-    padding: "0.5rem",
-    background: opacitize(color, 60),
-    border: `1px solid var(${color})`,
-    borderRadius: "100%",
-    outline: "none",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-    color: opacitize("--color-primary", 80),
-    transitionDuration: "200ms",
-    cursor: "pointer"
+const styles = tv({
+    base: "flex justify-center items-center p-2 rounded-full outline-none border text-sm text-primary-dark duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-115",
+    defaultVariants: { variant: "surface" },
+    variants: {
+        variant: {
+            surface: "bg-surface border-border",
+            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"
+        }
+    }
 });
+export default IconButton;

package/dist/components/layout/fade.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, tv } from "@bouko/style";
-export function FadeBox({ style, direction = "left", gradient, children }) {
+export function FadeBox({ style, direction = "up", gradient, children }) {
     return (_jsxs("div", { className: cn("relative", style), children: [children, _jsx("div", { className: cn(styles({ direction }), gradient) })] }));
 }
 const styles = tv({

package/package.json

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