@smicolon/fasla-ui 0.2.2

package/registry/ui/card/card.test.tsx

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "./card"
+
+describe("Card", () => {
+  it("renders Card with children", () => {
+    render(<Card>Card content</Card>)
+    expect(screen.getByText("Card content")).toBeInTheDocument()
+  })
+
+  it("renders Card with correct base classes", () => {
+    render(<Card data-testid="card">Content</Card>)
+    const card = screen.getByTestId("card")
+    expect(card).toHaveClass("rounded-xl", "border", "bg-card", "shadow")
+  })
+
+  it("applies custom className to Card", () => {
+    render(<Card className="custom-class" data-testid="card">Content</Card>)
+    expect(screen.getByTestId("card")).toHaveClass("custom-class")
+  })
+
+  it("forwards ref to Card", () => {
+    const ref = vi.fn()
+    render(<Card ref={ref}>Content</Card>)
+    expect(ref).toHaveBeenCalled()
+  })
+})
+
+describe("CardHeader", () => {
+  it("renders CardHeader with children", () => {
+    render(<CardHeader>Header content</CardHeader>)
+    expect(screen.getByText("Header content")).toBeInTheDocument()
+  })
+
+  it("renders CardHeader with correct classes", () => {
+    render(<CardHeader data-testid="header">Header</CardHeader>)
+    expect(screen.getByTestId("header")).toHaveClass("flex", "flex-col", "p-6")
+  })
+
+  it("applies custom className to CardHeader", () => {
+    render(<CardHeader className="custom-class" data-testid="header">Header</CardHeader>)
+    expect(screen.getByTestId("header")).toHaveClass("custom-class")
+  })
+})
+
+describe("CardTitle", () => {
+  it("renders CardTitle with children", () => {
+    render(<CardTitle>My Title</CardTitle>)
+    expect(screen.getByText("My Title")).toBeInTheDocument()
+  })
+
+  it("renders CardTitle with correct classes", () => {
+    render(<CardTitle data-testid="title">Title</CardTitle>)
+    expect(screen.getByTestId("title")).toHaveClass("font-semibold", "leading-none")
+  })
+})
+
+describe("CardDescription", () => {
+  it("renders CardDescription with children", () => {
+    render(<CardDescription>Description text</CardDescription>)
+    expect(screen.getByText("Description text")).toBeInTheDocument()
+  })
+
+  it("renders CardDescription with correct classes", () => {
+    render(<CardDescription data-testid="desc">Description</CardDescription>)
+    expect(screen.getByTestId("desc")).toHaveClass("text-sm", "text-muted-foreground")
+  })
+})
+
+describe("CardContent", () => {
+  it("renders CardContent with children", () => {
+    render(<CardContent>Content here</CardContent>)
+    expect(screen.getByText("Content here")).toBeInTheDocument()
+  })
+
+  it("renders CardContent with correct classes", () => {
+    render(<CardContent data-testid="content">Content</CardContent>)
+    expect(screen.getByTestId("content")).toHaveClass("p-6", "pt-0")
+  })
+})
+
+describe("CardFooter", () => {
+  it("renders CardFooter with children", () => {
+    render(<CardFooter>Footer content</CardFooter>)
+    expect(screen.getByText("Footer content")).toBeInTheDocument()
+  })
+
+  it("renders CardFooter with correct classes", () => {
+    render(<CardFooter data-testid="footer">Footer</CardFooter>)
+    expect(screen.getByTestId("footer")).toHaveClass("flex", "items-center", "p-6", "pt-0")
+  })
+})
+
+describe("Full Card composition", () => {
+  it("renders a complete card with all parts", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card description</CardDescription>
+        </CardHeader>
+        <CardContent>Main content</CardContent>
+        <CardFooter>Footer actions</CardFooter>
+      </Card>
+    )
+
+    expect(screen.getByText("Card Title")).toBeInTheDocument()
+    expect(screen.getByText("Card description")).toBeInTheDocument()
+    expect(screen.getByText("Main content")).toBeInTheDocument()
+    expect(screen.getByText("Footer actions")).toBeInTheDocument()
+  })
+})

package/registry/ui/card/card.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/registry/ui/card/index.ts

@@ -0,0 +1,8 @@
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./card"

package/registry/ui/checkbox/checkbox.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** Label text */
+  label?: string
+  /** Description text */
+  description?: string
+  /** Error state */
+  error?: boolean
+  /** Indeterminate state */
+  indeterminate?: boolean
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, description, error, indeterminate, id, ...props }, ref) => {
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    React.useImperativeHandle(ref, () => inputRef.current!)
+
+    React.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate ?? false
+      }
+    }, [indeterminate])
+
+    const inputId = id || React.useId()
+
+    const checkbox = (
+      <div className="relative flex items-center">
+        <input
+          type="checkbox"
+          ref={inputRef}
+          id={inputId}
+          className="peer sr-only"
+          {...props}
+        />
+        <div
+          className={cn(
+            "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border transition-colors",
+            "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+            "peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground",
+            "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+            error
+              ? "border-destructive peer-checked:border-destructive peer-checked:bg-destructive"
+              : "border-input",
+            className
+          )}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={cn(
+              "opacity-0 peer-checked:opacity-100",
+              indeterminate ? "hidden" : "block"
+            )}
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          {indeterminate && (
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+              strokeLinecap="round"
+            >
+              <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+          )}
+        </div>
+      </div>
+    )
+
+    if (!label && !description) {
+      return checkbox
+    }
+
+    return (
+      <div className="flex items-start gap-3">
+        {checkbox}
+        <div className="grid gap-1 leading-none">
+          {label && (
+            <label
+              htmlFor={inputId}
+              className={cn(
+                "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                error && "text-destructive"
+              )}
+            >
+              {label}
+            </label>
+          )}
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/registry/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from "./checkbox"