notionsoft-ui 1.0.39 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

package/src/notion-ui/card/Card.stories.tsx

@@ -0,0 +1,68 @@
+// Card.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+} from "./card";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="max-w-md">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>
+          This is a short description for the card.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <p className="text-sm">
+          This is the main content area of the card. You can place any elements
+          here.
+        </p>
+      </CardContent>
+
+      <CardFooter>
+        <span className="text-sm text-muted-foreground">
+          Footer content goes here
+        </span>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const WithAction: Story = {
+  render: () => (
+    <Card className="max-w-md">
+      <CardHeader>
+        <CardTitle>Card with Action</CardTitle>
+        <CardDescription>
+          This card demonstrates the CardAction slot.
+        </CardDescription>
+        <CardAction>
+          <button className="text-sm font-medium text-primary">Action</button>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent>
+        <p className="text-sm">
+          Card content with an action button aligned to the header.
+        </p>
+      </CardContent>
+    </Card>
+  ),
+};

package/src/notion-ui/card/card.tsx

@@ -0,0 +1,91 @@
+import { cn } from "@/utils/cn";
+import * as React from "react";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

package/src/notion-ui/pagination/pagination.tsx

@@ -63,7 +63,7 @@ const Pagination: React.FC<PaginationProps> = ({ lastPage, onPageChange }) => {
         onClick={() => {
           if (currentPage !== 1) handlePrevPage();
         }}
-        className={`size-8 rounded transition-[color,background-color,transform] cursor-pointer rtl:rotate-180 self-center p-2 ${
+        className={`size-7 rounded transition-[color,background-color,transform] cursor-pointer rtl:rotate-180 self-center p-2 ${
           currentPage === 1
             ? "text-primary/50"
             : "text-primary hover:scale-110 hover:bg-fourth/10"