@bouko/react 2.8.8 → 2.9.0

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

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import type { Component } from "../../core/types";
 export type ButtonProps = Component & {
-    variant?: "primary" | "outline" | "ghost" | "secondary";
+    variant?: "primary" | "outline" | "ghost" | "secondary" | "error";
     size?: "xs" | "sm" | "md" | "lg";
     icon?: ReactNode;
     action?: () => void;

package/dist/components/button/normal.js

@@ -25,10 +25,11 @@ const styles = tv({
             primary: "bg-primary border-primary-dark",
             outline: "bg-transparent border-accent hover:border-accent-dark text-primary",
             ghost: "bg-transparent border-transparent text-accent hover:brightness-110",
-            secondary: "bg-background-dark dark:bg-background-light border-border-dark dark:border-border-light text-background-darker dark:text-primary"
+            secondary: "bg-background-dark dark:bg-background-light border-border-dark dark:border-border-light text-background-darker dark:text-primary",
+            error: "bg-error border-error-dark"
         },
         size: {
-            xs: "px-3 py-1 text-xs",
+            xs: "gap-1 px-2 py-1 text-xs font-medium",
             circle: "px-2 py-2 text-xs rounded-full",
             sm: "px-3 py-2 text-xs sm:text-sm",
             md: "px-4 py-2",

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/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.8.8",
+  "version": "2.9.0",
   "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",