@bouko/react 3.0.4 → 3.0.6

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

@@ -1,2 +1,6 @@
 import type { Clickable } from "../../core/types";
-export default function IconButton({ style, color, icon, action, disabled }: Clickable): import("react/jsx-runtime").JSX.Element;
+type Props = Clickable & {
+    variant?: "accent" | "primary" | "outline" | "ghost" | "secondary" | "error" | "future";
+};
+export declare function IconButton({ variant, style, icon, action, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/components/button/icon.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
 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 || _jsx(Check, {}) }));
+export function IconButton({ variant, style, icon, action, disabled = false }) {
+    return (_jsx("button", { className: cn(styles({ variant }), style), onClick: action, disabled: !action || disabled, children: icon || _jsx(Check, {}) }));
 }
-const styles = (color) => ({
-    justifyContent: "center",
-    itemsCenter: "center",
-    padding: "0.5rem",
-    background: opacitize(color, 60),
-    border: `1px solid var(${color})`,
-    borderRadius: "100%",
-    outline: "none",
-    fontSize: "0.75rem",
-    fontWeight: "600",
-    color: opacitize("--color-primary", 80),
-    transitionDuration: "200ms",
-    cursor: "pointer"
+const styles = tv({
+    base: "flex justify-center items-center p-2 rounded-full outline-none border text-sm text-primary-dark duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-115",
+    defaultVariants: { variant: "surface" },
+    variants: {
+        variant: {
+            surface: "bg-surface border-border",
+            accent: "bg-accent border-accent-darker text-background-light",
+            primary: "bg-primary border-primary-dark",
+            outline: "bg-transparent border-accent hover:border-accent-dark text-primary",
+            ghost: "bg-transparent border-transparent text-primary hover:brightness-110",
+            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",
+            future: "rounded-lg text-primary border-transparent backdrop-blur-sm test-button"
+        }
+    }
 });
+export default IconButton;

package/dist/components/layout/fade.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, tv } from "@bouko/style";
-export function FadeBox({ style, direction = "left", gradient, children }) {
+export function FadeBox({ style, direction = "up", gradient, children }) {
     return (_jsxs("div", { className: cn("relative", style), children: [children, _jsx("div", { className: cn(styles({ direction }), gradient) })] }));
 }
 const styles = tv({

package/dist/components/layout/flex.d.ts

@@ -7,6 +7,7 @@ type Props = Component & Hoverable & {
     center?: boolean;
     centerX?: boolean;
     centerY?: boolean;
+    equal?: boolean;
 };
 /**
  * Flex containers with configurable alignment and styling.

package/dist/components/layout/flex.js

@@ -29,7 +29,8 @@ const row = tv({
     variants: {
         centerX: { true: "justify-center" },
         centerY: { true: "items-center" },
-        center: { true: "items-center justify-center" }
+        center: { true: "items-center justify-center" },
+        equal: { true: "[&>*]:flex-1" }
     }
 });
 const column = tv({
@@ -37,6 +38,7 @@ const column = tv({
     variants: {
         centerX: { true: "items-center" },
         centerY: { true: "justify-center" },
-        center: { true: "items-center justify-center" }
+        center: { true: "items-center justify-center" },
+        equal: { true: "[&>*]:flex-1" }
     }
 });

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

@@ -15,5 +15,6 @@ export declare function usePagination<T>({ fetcher, pageSize }: Options<T>): {
     prev: () => void;
     next: () => void;
     refresh: () => Promise<void>;
+    fetchedAt: Date | null;
 };
 export {};

package/dist/hooks/router/params.js

@@ -8,6 +8,7 @@ export function usePagination({ fetcher, pageSize }) {
     const [params, setParams] = useSearchParams();
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [fetchedAt, setFetchedAt] = useState(null);
     const raw = params.get("page");
     const page = Math.max(1, Number(raw) || 1);
     const setPage = (nextPage) => {
@@ -16,9 +17,14 @@ export function usePagination({ fetcher, pageSize }) {
     };
     const fetchPage = useCallback(async (refresh = false) => {
         setLoading(true);
-        fetcher({ page, pageSize, refresh })
-            .then(setItems)
-            .finally(() => setLoading(false));
+        const result = await fetcher({
+            page,
+            pageSize,
+            refresh
+        });
+        setItems(result);
+        setFetchedAt(new Date());
+        setLoading(false);
     }, [page, pageSize]);
     useEffect(() => {
         fetchPage(false);
@@ -29,6 +35,7 @@ export function usePagination({ fetcher, pageSize }) {
         page,
         prev: () => page > 1 ? setPage(page - 1) : undefined,
         next: () => !(page > 1 && items.length === 0) ? setPage(page + 1) : undefined,
-        refresh: () => fetchPage(true)
+        refresh: () => fetchPage(true),
+        fetchedAt
     };
 }

package/package.json

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