feat: sync card component

apps/docs/src/config/docs.ts

@@ -71,6 +71,10 @@ export const docsConfig: Config = {
           title: "Button Group",
           href: "/docs/components/button-group"
         },
+        {
+          title: "Card",
+          href: "/docs/components/card"
+        },
         {
           title: "Checkbox",
           href: "/docs/components/checkbox"

apps/docs/src/registry/__index__.tsx

@@ -130,6 +130,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "card": {
+    name: "card",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    component: lazy(() => import("~/registry/ui/card.tsx")),
+    files: [{
+      path: "registry/ui/card.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "button-group": {
     name: "button-group",
     description: "",
@@ -746,6 +760,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "card-demo": {
+    name: "card-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["card","button","input","label"],
+    component: lazy(() => import("~/registry/examples/card-demo.tsx")),
+    files: [{
+      path: "registry/examples/card-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "dropdown-menu-checkboxes": {
     name: "dropdown-menu-checkboxes",
     description: "",

apps/docs/src/registry/examples/_registry.ts

@@ -364,6 +364,17 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "card-demo",
+    type: "registry:example",
+    registryDependencies: ["card", "button", "input", "label"],
+    files: [
+      {
+        path: "examples/card-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
   {
     name: "dropdown-menu-checkboxes",
     type: "registry:example",

apps/docs/src/registry/examples/card-demo.tsx

@@ -0,0 +1,58 @@
+import { Button } from "~/registry/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "~/registry/ui/card"
+import { Input } from "~/registry/ui/input"
+import { Label } from "~/registry/ui/label"
+
+export default function CardDemo() {
+  return (
+    <Card class="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Login to your account</CardTitle>
+        <CardDescription>
+          Enter your email below to login to your account
+        </CardDescription>
+        <CardAction>
+          <Button variant="link">Sign Up</Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div class="flex flex-col gap-6">
+            <div class="grid gap-2">
+              <Label for="email">Email</Label>
+              <Input id="email" type="email" placeholder="m@example.com" required />
+            </div>
+            <div class="grid gap-2">
+              <div class="flex items-center">
+                <Label for="password">Password</Label>
+                <a
+                  href="#"
+                  class="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                >
+                  Forgot your password?
+                </a>
+              </div>
+              <Input id="password" type="password" required />
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter class="flex-col gap-2">
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/docs/src/registry/ui/_registry.ts

@@ -89,6 +89,16 @@ export const ui: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "card",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/card.tsx",
+        type: "registry:ui"
+      }
+    ]
+  },
   {
     name: "button-group",
     type: "registry:ui",

apps/docs/src/registry/ui/card.tsx

@@ -1,16 +1,19 @@
 import type { Component, ComponentProps } from "solid-js"
-import { splitProps } from "solid-js"
+import { mergeProps, splitProps } from "solid-js"
 
 import { cn } from "~/lib/utils"
 
-const Card: Component<ComponentProps<"div">> = (props) => {
-  const [local, others] = splitProps(props, ["class"])
+type CardProps = ComponentProps<"div"> & {
+  size?: "default" | "sm"
+}
+
+const Card: Component<CardProps> = (rawProps) => {
+  const props = mergeProps({ size: "default" as const }, rawProps)
+  const [local, others] = splitProps(props, ["class", "size"])
   return (
     <div
-      class={cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
-        local.class
-      )}
+      class={cn("cn-card group/card flex flex-col", local.class)}
+      data-size={local.size}
       data-slot="card"
       {...others}
     />
@@ -22,7 +25,7 @@ const CardHeader: Component<ComponentProps<"div">> = (props) => {
   return (
     <div
       class={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "cn-card-header group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
         local.class
       )}
       data-slot="card-header"
@@ -33,27 +36,24 @@ const CardHeader: Component<ComponentProps<"div">> = (props) => {
 
 const CardTitle: Component<ComponentProps<"div">> = (props) => {
   const [local, others] = splitProps(props, ["class"])
-  return (
-    <div class={cn("font-semibold leading-none", local.class)} data-slot="card-title" {...others} />
-  )
+  return <div class={cn("cn-card-title", local.class)} data-slot="card-title" {...others} />
 }
 
 const CardDescription: Component<ComponentProps<"div">> = (props) => {
   const [local, others] = splitProps(props, ["class"])
   return (
-    <div
-      class={cn("text-muted-foreground text-sm", local.class)}
-      data-slot="card-description"
-      {...others}
-    />
+    <div class={cn("cn-card-description", local.class)} data-slot="card-description" {...others} />
   )
 }
 
 const CardAction: Component<ComponentProps<"div">> = (props) => {
   const [local, others] = splitProps(props, ["class"])
   return (
     <div
-      class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", local.class)}
+      class={cn(
+        "cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        local.class
+      )}
       data-slot="card-action"
       {...others}
     />
@@ -62,14 +62,14 @@ const CardAction: Component<ComponentProps<"div">> = (props) => {
 
 const CardContent: Component<ComponentProps<"div">> = (props) => {
   const [local, others] = splitProps(props, ["class"])
-  return <div class={cn("px-6", local.class)} data-slot="card-content" {...others} />
+  return <div class={cn("cn-card-content", local.class)} data-slot="card-content" {...others} />
 }
 
 const CardFooter: Component<ComponentProps<"div">> = (props) => {
   const [local, others] = splitProps(props, ["class"])
   return (
     <div
-      class={cn("flex items-center px-6 [.border-t]:pt-6", local.class)}
+      class={cn("cn-card-footer flex items-center", local.class)}
       data-slot="card-footer"
       {...others}
     />

apps/docs/src/routes/docs/components/card.mdx

@@ -0,0 +1,64 @@
+---
+title: Card
+description: Displays a card with header, content, and footer.
+---
+
+::::tab-group[preview]
+:::tab[Preview]
+
+<ComponentPreview name="card-demo" />
+
+:::
+:::tab[Code]
+
+```file="~/registry/examples/card-demo" frame=none showLineNumbers
+
+```
+
+:::
+::::
+
+## Installation
+
+### CLI
+
+```package-exec
+solidui-cli@latest add card
+```
+
+### Manual
+
+Copy and paste the following code into your project.
+
+```file="~/registry/ui/card.tsx" showLineNumbers
+
+```
+
+## Usage
+
+```tsx
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "~/components/ui/card";
+```
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+```