@bouko/react 2.8.1 → 2.8.3

package/dist/components/animate/index.d.ts

@@ -52,4 +52,15 @@ export declare const slideY: (y?: number) => {
         y: number;
     };
 };
+export declare const scale: (x?: number) => {
+    initial: {
+        scale: number;
+    };
+    animate: {
+        scale: number;
+    };
+    exit: {
+        scale: number;
+    };
+};
 export { AnimatePresence } from "framer-motion";

package/dist/components/animate/index.js

@@ -30,4 +30,9 @@ export const slideY = (y = 5) => ({
     animate: { y: 0 },
     exit: { y: -y }
 });
+export const scale = (x = 1) => ({
+    initial: { scale: 0 },
+    animate: { scale: x },
+    exit: { scale: 0 }
+});
 export { AnimatePresence } from "framer-motion";

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export { default as AbsoluteBox } from "./layout/absolute";
 export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
+export * from "./tab";
 export { default as Pagination } from "./pagination";
 export { default as Button } from "./button/normal";
 export { default as IconButton } from "./button/icon";

package/dist/components/index.js

@@ -5,6 +5,7 @@ export { default as AbsoluteBox } from "./layout/absolute";
 export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
+export * from "./tab";
 export { default as Pagination } from "./pagination";
 export { default as Button } from "./button/normal";
 export { default as IconButton } from "./button/icon";

package/dist/components/tab.d.ts

@@ -0,0 +1,7 @@
+export type NavItem = {
+    id: string;
+    name: string;
+    icon: React.ReactNode;
+    isActive: boolean;
+};
+export declare const TabItem: ({ name, icon, isActive }: Omit<NavItem, "id">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tab.js

@@ -0,0 +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] }));
+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"
+});

package/package.json

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