@bouko/react 2.9.6 → 2.9.8

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/index.d.ts

@@ -8,6 +8,7 @@ export * from "./layout/flex";
 export * from "./tab";
 export * from "./route";
 export { default as Pagination } from "./pagination";
+export { default as Section } from "./section";
 export { default as Button } from "./button/normal";
 export { default as IconButton } from "./button/icon";
 export { default as Badge } from "./text/badge";

package/dist/components/index.js

@@ -8,6 +8,7 @@ export * from "./layout/flex";
 export * from "./tab";
 export * from "./route";
 export { default as Pagination } from "./pagination";
+export { default as Section } from "./section";
 export { default as Button } from "./button/normal";
 export { default as IconButton } from "./button/icon";
 export { default as Badge } from "./text/badge";

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/section.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+/**
+ * Settings Section Component.
+ *
+ * Generic layout wrapper used to group related settings or content
+ * under a titled section with a visual separator for consistency.
+ *
+ * @param {string} title - The section title displayed at top.
+ * @param {ReactNode} content - Rendered below the separator.
+**/
+declare const Section: ({ title, content }: {
+    title: string;
+    content: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Section;

package/dist/components/section.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColumnBox } from "./layout/flex";
+/**
+ * Settings Section Component.
+ *
+ * Generic layout wrapper used to group related settings or content
+ * under a titled section with a visual separator for consistency.
+ *
+ * @param {string} title - The section title displayed at top.
+ * @param {ReactNode} content - Rendered below the separator.
+**/
+const Section = ({ title, content }) => (_jsxs(ColumnBox, { style: styles.container, children: [title, _jsx("hr", { className: styles.separator }), content] }));
+const styles = {
+    container: "gap-2 items-start text-primary",
+    separator: "mb-2 w-full text-border-dark"
+};
+export default Section;

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.8",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",