@bouko/react 2.4.4 → 2.4.5

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

@@ -0,0 +1,7 @@
+import type { Component, Clickable } from "../../core/types";
+export default function GhostButton({ style, action, children }: Component & Clickable): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Problems:
+ *
+ * - Perfect `Button`
+**/ 

package/dist/components/button/ghost.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./normal";
+import { cn } from "@bouko/style";
+export default function GhostButton({ style, action, children }) {
+    if (!children)
+        return null;
+    return (_jsx(Button, { variant: "ghost", style: cn("p-0 hover:brightness-110", style), onClick: action, children: children }));
+}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type ButtonProps = {
+    variant?: "primary" | "outline" | "ghost";
+    size?: "xs" | "sm" | "md" | "lg";
+    style?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+};
+export declare function Button({ size, variant, style, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/button/normal.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+export function Button({ size, variant, style, ...props }) {
+    return (_jsx("button", { className: cn(styles({ variant, size }), style), ...props }));
+}
+const styles = tv({
+    base: "flex justify-center items-center gap-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed",
+    defaultVariants: { size: "md" },
+    variants: {
+        variant: {
+            primary: "bg-primary hover:bg-primary-dark border-primary-dark",
+            outline: "!bg-transparent border-accent hover:border-accent-dark text-primary",
+            ghost: "!bg-transparent border-transparent text-accent hover:text-accent-dark"
+        },
+        size: {
+            xs: "px-3 py-1 text-xs",
+            sm: "px-4 py-2 text-xs sm:text-sm",
+            md: "px-4 py-2",
+            lg: "px-5 py-3 text-lg"
+        }
+    }
+});
+export default Button;

package/dist/components/index.d.ts

@@ -3,7 +3,9 @@ export { default as FadeBox } from "./layout/fade";
 export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
+export { default as Button } from "./button/normal";
 export { default as LoadButton } from "./button/load";
+export { default as GhostButton } from "./button/ghost";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/components/index.js

@@ -3,7 +3,9 @@ export { default as FadeBox } from "./layout/fade";
 export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
+export { default as Button } from "./button/normal";
 export { default as LoadButton } from "./button/load";
+export { default as GhostButton } from "./button/ghost";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/components/search-bar.js

@@ -4,7 +4,7 @@ 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";
+import { Button } from "./button/normal";
 export function SearchBar({ style, placeholder, action }) {
     const [query, search] = useState("");
     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, {})] })] }));

package/dist/index.d.ts

@@ -6,7 +6,6 @@ export { default as Attachment } from "./components/attachment";
 export { default as CheckBox } from "./components/checkbox";
 export { default as FadeCarousel } from "./components/fade-carousel";
 export * from "./components";
-export * from "./components/button";
 export * from "./components/search-bar";
 export * from "./core/types";
 export * from "./core/functions";

package/dist/index.js

@@ -6,7 +6,6 @@ export { default as Attachment } from "./components/attachment";
 export { default as CheckBox } from "./components/checkbox";
 export { default as FadeCarousel } from "./components/fade-carousel";
 export * from "./components";
-export * from "./components/button";
 export * from "./components/search-bar";
 export * from "./core/types";
 export * from "./core/functions";

package/package.json

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