@bouko/react 2.5.5 → 2.5.6

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { Clickable } from "../../core/types";
+declare type Props = Clickable & {
+    color?: string;
+    icon: ReactNode;
+    disabled?: boolean;
+};
+export default function IconButton({ color, icon, action, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/icon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { opacitize } from "@bouko/style";
+export default function IconButton({ color = "--color-accent", icon, action, disabled = false }) {
+    return (_jsx("button", { className: "hover:brightness-115 disabled:cursor-not-allowed", style: styles(color), onClick: action, disabled: !action || disabled, children: icon }, void 0));
+}
+const styles = (color) => ({
+    display: "flex",
+    justifyContent: "center",
+    itemsCenter: "center",
+    padding: "0.5rem",
+    background: opacitize(color, 60),
+    border: `1px solid var(${color})`,
+    borderRadius: "100%",
+    fontSize: "0.75rem",
+    fontWeight: "600",
+    color: opacitize("--color-primary", 80),
+    transitionDuration: "200ms",
+    cursor: "pointer"
+});

package/dist/components/button/normal.js

@@ -29,6 +29,7 @@ const styles = tv({
         },
         size: {
             xs: "px-3 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-2",
             lg: "px-5 py-3 text-lg"

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ 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 IconButton } from "./button/icon";
 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

@@ -4,6 +4,7 @@ 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 IconButton } from "./button/icon";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/components/text/badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, css, opacitize } from "@bouko/style";
+import { opacitize } from "@bouko/style";
 /**
  * Color-themed badge component.
  *
@@ -13,9 +13,9 @@ import { cn, css, opacitize } from "@bouko/style";
 export function Badge({ style, color = "--color-accent", children }) {
     if (!children)
         return null;
-    return (_jsx("span", { className: cn(styles(color), style), children: children }, void 0));
+    return (_jsx("span", { className: style, style: styles(color), children: children }, void 0));
 }
-const styles = (color) => css({
+const styles = (color) => ({
     width: "min-content",
     padding: "0.25rem 0.75rem",
     background: opacitize(color),

package/dist/core/types.d.ts

@@ -11,4 +11,5 @@ export declare type Component = {
 };
 export declare type Clickable = {
     action: () => void;
+    disabled?: boolean;
 };

package/package.json

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