@bouko/react 2.9.6 → 2.9.7

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

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

package/dist/components/button/icon.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+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 }));
+    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, {}) }));
 }
 const styles = (color) => ({
     justifyContent: "center",

package/dist/components/media-row.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColumnBox, RowBox } from "./layout/flex";
 import Badge from "./text/badge";
-export const MediaRow = ({ media, title, subtitle, badge, styles = {}, }) => (_jsxs(RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [_jsx("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), _jsxs(ColumnBox, { style: "gap-px min-w-0", children: [_jsxs(RowBox, { style: "items-center gap-2 min-w-0", children: [_jsx("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && _jsx(Badge, { size: "sm", children: badge })] }), subtitle && (_jsx("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));
+export const MediaRow = ({ media, title, subtitle, badge, styles = {}, }) => (_jsxs(RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [_jsx("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), _jsxs(ColumnBox, { style: "gap-px min-w-0", children: [_jsxs(RowBox, { style: "items-center gap-2 min-w-0", children: [_jsx("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && _jsx(Badge, { size: "xs", children: badge })] }), subtitle && (_jsx("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));

package/dist/components/text/badge.d.ts

@@ -1,7 +1,7 @@
 import type { Component } from "../../core/types";
 type Props = Component & {
     color?: string;
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
 };
 /**
  * Color-themed badge component.

package/dist/core/types.d.ts

@@ -10,6 +10,9 @@ export type Component = {
     children?: ReactNode;
 };
 export type Clickable = {
+    style?: string;
+    color?: string;
+    icon?: React.ReactNode;
     action?: () => void;
     disabled?: boolean;
 };

package/package.json

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