@bouko/react 2.8.7 → 2.8.9

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

@@ -17,3 +17,4 @@ export * from "./animate";
 export * from "./list";
 export * from "./carousel";
 export * from "./media-row";
+export * from "./scroll-box";

package/dist/components/index.js

@@ -17,3 +17,4 @@ export * from "./animate";
 export * from "./list";
 export * from "./carousel";
 export * from "./media-row";
+export * from "./scroll-box";

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

@@ -0,0 +1,14 @@
+import { JSX, Dispatch, SetStateAction } from "react";
+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;
+};
+export declare function ScrollBox<T>({ style, items, element }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/scroll-box.js

@@ -0,0 +1,14 @@
+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 }) {
+    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
+        }))) }));
+}

package/dist/hooks/router/params.d.ts

@@ -1,4 +1,18 @@
-export declare function usePagination(defaultPage?: number): {
+type Options<T> = {
+    fetcher: (query: PaginationQuery) => Promise<T[]>;
+    pageSize: number;
+};
+type PaginationQuery = {
+    page: number;
+    pageSize: number;
+    refresh?: boolean;
+};
+export declare function usePagination<T>({ fetcher, pageSize }: Options<T>): {
+    items: T[];
+    loading: boolean;
     page: number;
-    setPage: (nextPage: number) => void;
+    prev: () => void;
+    next: () => void;
+    refresh: () => Promise<void>;
 };
+export {};

package/dist/hooks/router/params.js

@@ -1,11 +1,30 @@
+import { useState, useCallback, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
-export function usePagination(defaultPage = 1) {
+export function usePagination({ fetcher, pageSize }) {
     const [params, setParams] = useSearchParams();
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(false);
     const raw = params.get("page");
-    const page = Math.max(1, Number(raw) || defaultPage);
+    const page = Math.max(1, Number(raw) || 1);
     const setPage = (nextPage) => {
         params.set("page", String(Math.max(1, nextPage)));
         setParams(params);
     };
-    return { page, setPage };
+    const fetchPage = useCallback(async (refresh = false) => {
+        setLoading(true);
+        fetcher({ page, pageSize, refresh })
+            .then(setItems)
+            .finally(() => setLoading(false));
+    }, [page, pageSize]);
+    useEffect(() => {
+        fetchPage(false);
+    }, [fetchPage]);
+    return {
+        items,
+        loading,
+        page,
+        prev: () => page > 1 ? setPage(page - 1) : undefined,
+        next: () => !(page > 1 && items.length === 0) ? setPage(page + 1) : undefined,
+        refresh: () => fetchPage(true)
+    };
 }

package/package.json

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