@ugurdemirel/landcraft 0.1.5 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.5",
+  "version": "0.1.10",
   "publishConfig": {
     "access": "public"
   },
@@ -20,20 +20,20 @@
       "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/styles.css",
-    "./theme.css": "./src/styles/theme.css"
+    "./theme.css": "./dist/theme.css"
   },
   "files": [
     "dist",
-    "src",
     "README.md"
   ],
   "sideEffects": [
     "*.css"
   ],
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css",
+    "build": "pnpm run build:js && pnpm run build:css && pnpm run copy:theme",
     "build:js": "vite build",
     "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css",
+    "copy:theme": "cp ./src/styles/theme.css ./dist/theme.css",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/components/Badge.test.tsx

@@ -1,55 +0,0 @@
-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/Badge.tsx

@@ -1,68 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { getContrastText } from "../utils/contrast";
-
-export type BadgeVariant = "solid" | "soft" | "outline" | "dot";
-export type BadgeSize = "sm" | "md";
-
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-  icon?: ReactNode;
-  /** Paints the chip with an arbitrary CSS color; text color is computed for contrast. */
-  customColor?: string;
-}
-
-const base =
-  "inline-flex items-center rounded-full font-medium tracking-tight transition-colors duration-200";
-
-const sizes: Record<BadgeSize, string> = {
-  sm: "px-2.5 py-0.5 text-xs gap-1",
-  md: "px-3 py-1 text-[13px] gap-1.5",
-};
-
-const variants: Record<BadgeVariant, string> = {
-  solid: "bg-primary text-on-primary",
-  soft: "bg-primary-soft text-primary",
-  outline: "text-muted-foreground ring-1 ring-inset ring-border",
-  dot: "text-foreground ring-1 ring-inset ring-border bg-surface",
-};
-
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  (
-    { className, variant = "soft", size = "md", icon, customColor, style, children, ...props },
-    ref,
-  ) => {
-    const customStyle = customColor
-      ? { ...style, backgroundColor: customColor, color: getContrastText(customColor, "#111111", "#ffffff") }
-      : style;
-
-    return (
-      <span
-        ref={ref}
-        style={customStyle}
-        className={cn(
-          base,
-          sizes[size],
-          customColor ? undefined : variants[variant],
-          className,
-        )}
-        {...props}
-      >
-        {variant === "dot" ? (
-          <span
-            aria-hidden
-            className={cn(
-              "h-1.5 w-1.5 shrink-0 rounded-full",
-              customColor ? "currentColor" : "bg-primary",
-            )}
-            style={customColor ? { backgroundColor: customColor } : undefined}
-          />
-        ) : null}
-        {icon ? <span className="shrink-0 opacity-70">{icon}</span> : null}
-        {children}
-      </span>
-    );
-  },
-);
-Badge.displayName = "Badge";

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

@@ -1,64 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

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

package/src/components/Blog/parts.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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();
-  });
-});