@bouko/react 2.8.9 → 2.9.1

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 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: "sm", children: badge })] }), subtitle && (_jsx("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));

package/dist/components/scroll-box.d.ts

@@ -1,14 +1,14 @@
-import { JSX, Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction } from "react";
+type RowProps<T> = {
+    data: T;
+    hovered: boolean;
+    setHovered: Dispatch<SetStateAction<number | null>>;
+    index: number;
+};
 type Props<T> = {
     style?: string;
     items: T[];
-    element: ({ data, hovered, setHovered, index }: {
-        data: T;
-        hovered: boolean;
-        setHovered: Dispatch<SetStateAction<number | null>>;
-        index: number;
-        key: number;
-    }) => JSX.Element;
+    element: React.ComponentType<RowProps<T>>;
 };
-export declare function ScrollBox<T>({ style, items, element }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollBox<T>({ style, items, element: Row }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/scroll-box.js

@@ -2,13 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "@bouko/style";
 import { ColumnBox } from "./layout/flex";
-export function ScrollBox({ style, items, element }) {
+export function ScrollBox({ style, items, element: Row }) {
     const [hoveredIndex, setHoveredIndex] = useState(null);
-    return (_jsx(ColumnBox, { style: cn("grow gap-1 w-full overflow-y-auto", style), children: items.map((x, i) => (element({
-            data: x,
-            hovered: hoveredIndex === i,
-            setHovered: setHoveredIndex,
-            index: i,
-            key: i
-        }))) }));
+    return (_jsx(ColumnBox, { style: cn("grow gap-1 w-full overflow-y-auto", style), children: items.map((x, i) => (_jsx(Row, { data: x, hovered: hoveredIndex === i, setHovered: setHoveredIndex, index: i }, i))) }));
 }

package/dist/components/tab.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, css } from "@bouko/style";
-export const TabItem = ({ name, icon, isActive }) => (_jsxs("div", { className: cn(styles, isActive && "bg-background-light text-primary hover:cursor-default"), children: [_jsx("div", { className: cn("duration-200", isActive && "text-accent"), children: icon }), name] }));
+export const TabItem = ({ name, icon, isActive }) => (_jsxs("div", { className: cn(styles, isActive && "!bg-surface-light text-primary hover:cursor-default"), children: [_jsx("div", { className: cn("duration-200", isActive && "text-accent"), children: icon }), name] }));
 const styles = css({
     base: "flex items-center gap-2 px-2 py-1 rounded-xs duration-200 cursor-pointer",
-    color: "bg-background-light/70 hover:bg-background-light/90 border border-border-dark",
-    text: "font-semibold text-sm text-primary-darker"
+    color: "bg-surface-dark hover:bg-surface border border-border-dark",
+    text: "font-medium text-sm text-primary-dark"
 });

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.8.9",
+  "version": "2.9.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@bouko/audio": "^0.1.0",
     "@bouko/form": "^0.5.7",
+    "@bouko/notify": "^0.1.8",
     "@bouko/style": "^0.1.7",
     "@bouko/time": "^0.1.3",
     "@bouko/ts": "^0.3.5",