@ugurdemirel/landcraft 0.1.3 → 0.1.5

package/dist/styles.css

@@ -1679,6 +1679,9 @@
   .aspect-\[16\/10\] {
     aspect-ratio: 16/10;
   }
+  .h-1 {
+    height: var(--spacing);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -2071,6 +2074,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
@@ -2265,6 +2271,12 @@
   .p-1 {
     padding: var(--spacing);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
@@ -2733,6 +2745,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,14 +35,16 @@
     "build:js": "vite build",
     "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "clean": "rimraf dist",
     "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "tailwindcss": "^4.0.0",
-    "@tailwindcss/typography": "^0.5.15"
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@tailwindcss/typography": {
@@ -56,14 +58,19 @@
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.5",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^30.0.1",
     "rimraf": "^6.0.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0"
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.2.7"
   }
 }

package/src/components/Badge.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Badge } from "./Badge";
+import { Zap } from "../icons";
+
+describe("Badge", () => {
+  it("renders a span with children", () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText("New")).toBeInTheDocument();
+    expect(screen.getByText("New").tagName).toBe("SPAN");
+  });
+
+  it("defaults to the soft variant", () => {
+    render(<Badge>Soft</Badge>);
+    expect(screen.getByText("Soft")).toHaveClass("bg-primary-soft");
+  });
+
+  it("applies the requested variant", () => {
+    render(<Badge variant="solid">Solid</Badge>);
+    expect(screen.getByText("Solid")).toHaveClass("bg-primary");
+  });
+
+  it("renders a dot indicator for the dot variant", () => {
+    const { container } = render(<Badge variant="dot">Online</Badge>);
+    // The dot is an inner decorative span.
+    const dots = container.querySelectorAll("span.h-1\\.5");
+    expect(dots.length).toBeGreaterThan(0);
+  });
+
+  it("renders an icon", () => {
+    render(
+      <Badge icon={<Zap data-testid="icon" />} variant="soft">
+        Fast
+      </Badge>,
+    );
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("applies sizes", () => {
+    render(<Badge size="sm">Small</Badge>);
+    expect(screen.getByText("Small")).toHaveClass("px-2.5");
+  });
+
+  it("sets a computed text color for customColor", () => {
+    render(<Badge customColor="#111111">Dark</Badge>);
+    const badge = screen.getByText("Dark");
+    expect(badge).toHaveStyle({ backgroundColor: "#111111" });
+    expect(badge).toHaveStyle({ color: "#ffffff" });
+  });
+
+  it("forwards arbitrary props like aria-label", () => {
+    render(<Badge aria-label="status">v1</Badge>);
+    expect(screen.getByLabelText("status")).toBeInTheDocument();
+  });
+});

package/src/components/Blog/Blog.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BlogCard } from "./BlogCard";
+import { BlogSection } from "./BlogSection";
+
+const posts = [
+  {
+    title: "Token-based theming",
+    excerpt: "A short excerpt.",
+    date: "12 Aug 2026",
+    readTime: "5 min",
+    category: "Strategy",
+    href: "/post",
+    author: { name: "Aylin Demir" },
+  },
+  {
+    title: "Second post",
+    date: "1 Aug 2026",
+  },
+];
+
+describe("BlogCard", () => {
+  it("renders a card with title, category badge and meta (card option)", () => {
+    render(<BlogCard post={posts[0]} />);
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+    expect(screen.getByText("Strategy")).toBeInTheDocument();
+    expect(screen.getByText("5 min")).toBeInTheDocument();
+  });
+
+  it("renders the row option", () => {
+    render(<BlogCard post={posts[0]} option="row" />);
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+  });
+
+  it("links to the post href", () => {
+    render(<BlogCard post={posts[0]} />);
+    expect(
+      screen.getByRole("link", { name: /Token-based theming/ }),
+    ).toHaveAttribute("href", "/post");
+  });
+});
+
+describe("BlogSection", () => {
+  it("renders the heading and posts as a card grid", () => {
+    render(
+      <BlogSection
+        posts={posts}
+        eyebrow="Blog"
+        title="Latest"
+        description="A description."
+      />,
+    );
+    expect(screen.getByText("Blog")).toBeInTheDocument();
+    expect(screen.getByText("Latest")).toBeInTheDocument();
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+    expect(screen.getByText("Second post")).toBeInTheDocument();
+  });
+
+  it("limits the number of posts with the limit prop", () => {
+    render(<BlogSection posts={posts} limit={1} />);
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+    expect(screen.queryByText("Second post")).not.toBeInTheDocument();
+  });
+});

package/src/components/Blog/BlogCard.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import type { BlogCardProps } from "./types";
+import { BlogCardCard } from "./variants/Card";
+import { BlogCardRow } from "./variants/Row";
+
+export const BlogCard = forwardRef<HTMLAnchorElement, BlogCardProps>(
+  ({ option = "card", ...props }, ref) => {
+    if (option === "row") return <BlogCardRow ref={ref} {...props} />;
+    return <BlogCardCard ref={ref} {...props} />;
+  },
+);
+BlogCard.displayName = "BlogCard";

package/src/components/Blog/BlogSection.tsx

@@ -0,0 +1,95 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+import { ArrowRight } from "../../icons";
+import { Container } from "../Container";
+import { BlogCard } from "./BlogCard";
+import type { BlogSectionProps } from "./types";
+
+const gridCols: Record<2 | 3, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+};
+
+export const BlogSection = forwardRef<HTMLElement, BlogSectionProps>(
+  (
+    {
+      className,
+      posts,
+      limit,
+      columns = 3,
+      option = "card",
+      eyebrow,
+      eyebrowStyle = "caps",
+      title,
+      description,
+      showAllLabel,
+      showAllHref,
+      LinkComponent,
+      ...props
+    },
+    ref,
+  ) => {
+    const visible = limit ? posts.slice(0, limit) : posts;
+    const Link = LinkComponent ?? "a";
+
+    return (
+      <section ref={ref} className={cn("w-full py-20 sm:py-24", className)} {...props}>
+        <Container>
+          {(eyebrow || title || description || showAllHref) && (
+            <div className="mb-12 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+              <div className="max-w-2xl">
+                {eyebrow ? (
+                  <p
+                    className={cn(
+                      "text-xs font-semibold uppercase tracking-[0.18em]",
+                      eyebrowStyle === "caps" && "text-foreground/50",
+                      eyebrowStyle === "soft" &&
+                        "inline-flex items-center rounded-full bg-primary-soft px-3 py-1.5 text-primary",
+                      eyebrowStyle === "plain" && "text-primary",
+                    )}
+                  >
+                    {eyebrow}
+                  </p>
+                ) : null}
+                {title ? (
+                  <h2 className="mt-4 font-display text-balance text-3xl font-semibold leading-[1.08] tracking-tight text-foreground sm:text-4xl">
+                    {title}
+                  </h2>
+                ) : null}
+                {description ? (
+                  <p className="mt-4 text-pretty text-base leading-7 text-muted-foreground">
+                    {description}
+                  </p>
+                ) : null}
+              </div>
+              {showAllHref ? (
+                <Link
+                  href={showAllHref}
+                  className="group inline-flex shrink-0 cursor-pointer items-center gap-1.5 text-sm font-semibold text-foreground transition-colors duration-150 hover:text-primary"
+                >
+                  {showAllLabel ?? "All posts"}
+                  <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
+                </Link>
+              ) : null}
+            </div>
+          )}
+
+          {option === "row" ? (
+            <div className="divide-y divide-border border-t border-border">
+              {visible.map((post) => (
+                <BlogCard key={post.title} post={post} option="row" LinkComponent={LinkComponent} />
+              ))}
+            </div>
+          ) : (
+            <div className={cn("grid grid-cols-1 gap-4", gridCols[columns])}>
+              {visible.map((post) => (
+                <BlogCard key={post.title} post={post} option="card" LinkComponent={LinkComponent} />
+              ))}
+            </div>
+          )}
+        </Container>
+      </section>
+    );
+  },
+);
+BlogSection.displayName = "BlogSection";

package/src/components/Blog/index.ts

@@ -0,0 +1,8 @@
+export { BlogCard } from "./BlogCard";
+export { BlogSection } from "./BlogSection";
+export type {
+  BlogCardProps,
+  BlogSectionProps,
+  BlogPost,
+  BlogAuthor,
+} from "./types";

package/src/components/Blog/parts.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import type { BlogPost } from "./types";
+
+export function AuthorMark({ name, avatar }: { name: string; avatar?: ReactNode }) {
+  if (avatar) return avatar;
+  const initials = name
+    .split(" ")
+    .map((p) => p[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+  return (
+    <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-primary-soft text-[11px] font-bold text-primary">
+      {initials}
+    </span>
+  );
+}
+
+export const Cover = ({ post }: { post: BlogPost }) =>
+  post.cover ? (
+    <img src={post.cover} alt="" loading="lazy" className="aspect-[16/10] w-full object-cover" />
+  ) : (
+    <div
+      className="grid aspect-[16/10] w-full place-items-center bg-surface-strong"
+      style={
+        post.accent
+          ? { background: `linear-gradient(135deg, ${post.accent}22, ${post.accent}11)` }
+          : undefined
+      }
+    >
+      <span
+        className="font-display text-4xl font-bold tracking-[-0.04em]"
+        style={{ color: post.accent ?? "rgb(var(--color-foreground) / 0.12)" }}
+      >
+        {post.category?.[0]?.toUpperCase()}
+      </span>
+    </div>
+  );

package/src/components/Blog/types.ts

@@ -0,0 +1,42 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+export interface BlogAuthor {
+  name: string;
+  avatar?: ReactNode;
+}
+
+export interface BlogPost {
+  title: string;
+  excerpt?: string;
+  /** Display date, e.g. "12 Aug 2026". */
+  date: string;
+  readTime?: string;
+  category?: string;
+  cover?: string;
+  /** Arbitrary CSS color for the cover placeholder accent. */
+  accent?: string;
+  href?: string;
+  author?: BlogAuthor;
+}
+
+export interface BlogCardProps extends HTMLAttributes<HTMLAnchorElement> {
+  post: BlogPost;
+  option?: "card" | "row";
+  /** Component used to render the card link. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
+}
+
+export interface BlogSectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  posts: BlogPost[];
+  /** Show only the first N posts. */
+  limit?: number;
+  columns?: 2 | 3;
+  option?: "card" | "row";
+  eyebrow?: ReactNode;
+  eyebrowStyle?: "caps" | "soft" | "plain";
+  title?: ReactNode;
+  description?: ReactNode;
+  showAllLabel?: string;
+  showAllHref?: string;
+  LinkComponent?: ElementType;
+}

package/src/components/Blog/variants/Card.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, type ElementType } from "react";
+import { cn } from "../../../utils/cn";
+import { ArrowRight } from "../../../icons";
+import { Badge } from "../../Badge";
+import { AuthorMark, Cover } from "../parts";
+import type { BlogPost } from "../types";
+
+interface BlogCardCardProps {
+  post: BlogPost;
+  LinkComponent?: ElementType;
+  className?: string;
+}
+
+export const BlogCardCard = forwardRef<HTMLAnchorElement, BlogCardCardProps>(
+  ({ className, post, LinkComponent, ...props }, ref) => {
+    const Link = LinkComponent ?? "a";
+    const author = post.author;
+    return (
+      <Link
+        ref={ref}
+        href={post.href ?? "#"}
+        className={cn(
+          "group flex h-full cursor-pointer flex-col overflow-hidden rounded-xl border border-border bg-surface transition-colors duration-200 hover:border-foreground/20",
+          className,
+        )}
+        {...props}
+      >
+        <div className="overflow-hidden">
+          <Cover post={post} />
+        </div>
+        <div className="flex flex-1 flex-col p-6">
+          <div className="flex items-center justify-between gap-3">
+            {post.category ? <Badge variant="soft" size="sm">{post.category}</Badge> : <span />}
+            {post.readTime ? (
+              <span className="text-xs text-muted-foreground">{post.readTime}</span>
+            ) : null}
+          </div>
+          <h3 className="mt-4 font-display text-lg font-semibold leading-snug tracking-tight text-foreground sm:text-xl">
+            {post.title}
+          </h3>
+          {post.excerpt ? (
+            <p className="mt-2.5 line-clamp-2 text-sm leading-6 text-muted-foreground">
+              {post.excerpt}
+            </p>
+          ) : null}
+          <div className="mt-5 flex items-center justify-between gap-3 border-t border-border pt-4">
+            {author ? (
+              <span className="flex min-w-0 items-center gap-2.5">
+                <AuthorMark name={author.name} avatar={author.avatar} />
+                <span className="truncate text-xs font-medium text-foreground">{author.name}</span>
+              </span>
+            ) : (
+              <span className="text-xs tabular-nums text-muted-foreground">{post.date}</span>
+            )}
+            <ArrowRight className="h-4 w-4 text-foreground/35 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground" />
+          </div>
+        </div>
+      </Link>
+    );
+  },
+);
+BlogCardCard.displayName = "BlogCardCard";

package/src/components/Blog/variants/Row.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, type ElementType } from "react";
+import { cn } from "../../../utils/cn";
+import { ArrowUpRight } from "../../../icons";
+import type { BlogPost } from "../types";
+
+interface BlogCardRowProps {
+  post: BlogPost;
+  LinkComponent?: ElementType;
+  className?: string;
+}
+
+export const BlogCardRow = forwardRef<HTMLAnchorElement, BlogCardRowProps>(
+  ({ className, post, LinkComponent, ...props }, ref) => {
+    const Link = LinkComponent ?? "a";
+    return (
+      <Link
+        ref={ref}
+        href={post.href ?? "#"}
+        className={cn("group flex cursor-pointer items-baseline gap-5 py-6", className)}
+        {...props}
+      >
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-3">
+            {post.category ? <span className="rounded-full bg-primary-soft px-2.5 py-0.5 text-xs font-semibold text-primary">{post.category}</span> : null}
+            <span className="text-xs tabular-nums text-muted-foreground">
+              {post.date}
+              {post.readTime ? ` · ${post.readTime}` : ""}
+            </span>
+          </div>
+          <h3 className="mt-2.5 font-display text-xl font-semibold tracking-tight text-foreground transition-transform duration-200 group-hover:translate-x-1 sm:text-2xl">
+            {post.title}
+          </h3>
+        </div>
+        <span className="text-foreground/30 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground">
+          <ArrowUpRight className="h-5 w-5" />
+        </span>
+      </Link>
+    );
+  },
+);
+BlogCardRow.displayName = "BlogCardRow";

package/src/components/Button.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button } from "./Button";
+import { ArrowRight } from "../icons";
+
+describe("Button", () => {
+  it("renders a button element with children", () => {
+    render(<Button>Hello</Button>);
+    const btn = screen.getByRole("button", { name: "Hello" });
+    expect(btn).toBeInTheDocument();
+    expect(btn.tagName).toBe("BUTTON");
+  });
+
+  it("defaults to type=button so it never submits forms unintentionally", () => {
+    render(<Button>Save</Button>);
+    expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("type", "button");
+  });
+
+  it("applies the default primary variant", () => {
+    render(<Button>Start</Button>);
+    expect(screen.getByRole("button", { name: "Start" })).toHaveClass("bg-primary");
+  });
+
+  it("applies the requested variant class", () => {
+    render(<Button variant="ghost">Ghost</Button>);
+    expect(screen.getByRole("button", { name: "Ghost" })).toHaveClass("hover:bg-surface");
+  });
+
+  it("applies the link variant underline behavior", () => {
+    render(<Button variant="link">Link</Button>);
+    expect(screen.getByRole("button", { name: "Link" })).toHaveClass("hover:underline");
+  });
+
+  it("renders leading and trailing icons", () => {
+    render(
+      <Button iconLeft={<span data-testid="left" />} iconRight={<ArrowRight data-testid="right" />}>
+        Next
+      </Button>,
+    );
+    const btn = screen.getByRole("button", { name: "Next" });
+    expect(btn.querySelector('[data-testid="left"]')).toBeInTheDocument();
+    expect(btn.querySelector('[data-testid="right"]')).toBeInTheDocument();
+  });
+
+  it("applies fullWidth", () => {
+    render(<Button fullWidth>Wide</Button>);
+    expect(screen.getByRole("button", { name: "Wide" })).toHaveClass("w-full");
+  });
+
+  it("disables and blocks clicks when disabled", async () => {
+    const onClick = vi.fn();
+    render(
+      <Button disabled onClick={onClick}>
+        Disabled
+      </Button>,
+    );
+    const btn = screen.getByRole("button", { name: "Disabled" });
+    expect(btn).toBeDisabled();
+    await userEvent.click(btn);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("sets a computed text color and background for customColor", () => {
+    render(<Button customColor="#111111">Custom</Button>);
+    const btn = screen.getByRole("button", { name: "Custom" });
+    expect(btn).toHaveStyle({ backgroundColor: "#111111" });
+    // Text is the light candidate for a very dark background.
+    expect(btn).toHaveStyle({ color: "#ffffff" });
+  });
+
+  it("forwards an onClick handler and fires it", async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await userEvent.click(screen.getByRole("button", { name: "Click" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies button styles onto a single child when asChild is set", () => {
+    render(
+      <Button asChild>
+        <a href="#pricing">Pricing link</a>
+      </Button>,
+    );
+    const link = screen.getByRole("link", { name: "Pricing link" });
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveClass("bg-primary");
+    // No wrapping <button> is rendered.
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});

package/src/components/CTA/CTA.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { CTA } from "./CTA";
+
+const base = { title: "Ready to get started?" };
+
+describe("CTA", () => {
+  it("renders the title and description", () => {
+    render(<CTA {...base} description="Free for 14 days." />);
+    expect(screen.getByText("Ready to get started?")).toBeInTheDocument();
+    expect(screen.getByText("Free for 14 days.")).toBeInTheDocument();
+  });
+
+  it("renders primary and secondary actions", () => {
+    render(
+      <CTA
+        {...base}
+        action={<a href="#a">Action</a>}
+        secondaryAction={<a href="#b">Secondary</a>}
+      />,
+    );
+    expect(screen.getByRole("link", { name: "Action" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Secondary" })).toBeInTheDocument();
+  });
+
+  it("renders the panel option (default) with a radial brand background", () => {
+    const { container } = render(<CTA {...base} option="panel" />);
+    const panel = container.querySelector("div[class*='rounded-']");
+    expect(panel).toBeInTheDocument();
+  });
+
+  it("renders the surface option as a paper band", () => {
+    const { container } = render(<CTA {...base} option="surface" />);
+    expect(container.querySelector("section")).toHaveClass("w-full");
+  });
+
+  it("renders the inverse option on a secondary surface", () => {
+    const { container } = render(<CTA {...base} option="inverse" />);
+    // The inverse option paints its band with the --color-secondary token.
+    const ink = container.querySelector("[style*='--color-secondary']");
+    expect(ink).toBeInTheDocument();
+  });
+
+  it("applies centered alignment", () => {
+    render(<CTA {...base} option="surface" align="center" />);
+    expect(screen.getByText("Ready to get started?")).toBeInTheDocument();
+  });
+
+  it("forwards an id", () => {
+    const { container } = render(<CTA {...base} id="cta" />);
+    expect(container.querySelector("section#cta")).not.toBeNull();
+  });
+});

package/src/components/CTA/CTA.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import type { CTAProps } from "./types";
+import { CTAPanel } from "./variants/Panel";
+import { CTASurface } from "./variants/Surface";
+import { CTAInverse } from "./variants/Inverse";
+
+export const CTA = forwardRef<HTMLElement, CTAProps>(({ option = "panel", ...props }, ref) => {
+  if (option === "surface") return <CTASurface ref={ref} {...props} />;
+  if (option === "inverse") return <CTAInverse ref={ref} {...props} />;
+  return <CTAPanel ref={ref} {...props} />;
+});
+CTA.displayName = "CTA";

package/src/components/CTA/index.ts

@@ -0,0 +1,2 @@
+export { CTA } from "./CTA";
+export type { CTAProps, CTAOption } from "./types";