@ugurdemirel/landcraft 0.1.4 → 0.1.9

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);
   }
@@ -2268,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);
   }
@@ -2736,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.4",
+  "version": "0.1.9",
   "publishConfig": {
     "access": "public"
   },
@@ -20,29 +20,31 @@
       "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",
     "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.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/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.tsx

@@ -1,113 +0,0 @@
-import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { getContrastText } from "../utils/contrast";
-import { Slot } from "./Slot";
-
-export type ButtonVariant = "primary" | "dark" | "outline" | "ghost" | "link";
-export type ButtonSize = "sm" | "md" | "lg";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  iconLeft?: ReactNode;
-  iconRight?: ReactNode;
-  /** Paints the button with an arbitrary CSS color; text color is computed for contrast. */
-  customColor?: string;
-  fullWidth?: boolean;
-  /**
-   * When `true`, the button styling is applied to a single child element
-   * instead of a `<button>`. Use it to render a framework router `<Link>`
-   * (Next.js, Remix, React Router…). `iconLeft` / `iconRight` are ignored;
-   * pass icons inside the child instead.
-   */
-  asChild?: boolean;
-}
-
-const variants: Record<ButtonVariant, string> = {
-  primary: "bg-primary text-on-primary hover:bg-primary-hover",
-  dark: "bg-secondary text-on-secondary hover:bg-secondary-hover",
-  outline:
-    "border border-border bg-transparent text-foreground hover:border-foreground/30 hover:bg-surface",
-  ghost: "text-foreground hover:bg-surface",
-  link: "px-0 h-auto text-primary hover:text-primary-hover",
-};
-
-const sizes: Record<ButtonSize, string> = {
-  sm: "h-9 px-4 text-[13px] gap-1.5",
-  md: "h-11 px-5 text-sm gap-2",
-  lg: "h-12 px-7 text-[15px] gap-2",
-};
-
-const base =
-  "group inline-flex select-none items-center justify-center rounded-lg font-medium tracking-tight transition-[background-color,border-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 cursor-pointer";
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant = "primary",
-      size = "md",
-      iconLeft,
-      iconRight,
-      customColor,
-      fullWidth,
-      asChild,
-      style,
-      type = "button",
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const customStyle: CSSProperties | undefined = customColor
-      ? {
-          ...style,
-          backgroundColor: customColor,
-          color: getContrastText(customColor),
-        }
-      : style;
-
-    const isLink = variant === "link";
-
-    const classes = cn(
-      base,
-      sizes[size],
-      customColor ? "hover:brightness-95" : variants[variant],
-      isLink && "underline-offset-4 hover:underline",
-      fullWidth && "w-full",
-      className,
-    );
-
-    if (asChild) {
-      return (
-        <Slot ref={ref} style={customStyle} className={classes} {...props}>
-          {children}
-        </Slot>
-      );
-    }
-
-    return (
-      <button
-        ref={ref}
-        type={type}
-        style={customStyle}
-        className={classes}
-        {...props}
-      >
-        {iconLeft ? <span className={cn("shrink-0", !isLink && "opacity-70")}>{iconLeft}</span> : null}
-        {children}
-        {iconRight ? (
-          <span
-            className={cn(
-              "shrink-0 transition-transform duration-200",
-              !isLink && "opacity-70 group-hover:translate-x-0.5",
-            )}
-          >
-            {iconRight}
-          </span>
-        ) : null}
-      </button>
-    );
-  },
-);
-Button.displayName = "Button";

package/src/components/CTA/CTA.tsx

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

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

package/src/components/CTA/parts.tsx

@@ -1,26 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../../utils/cn";
-
-export function CTAActions({
-  action,
-  secondaryAction,
-  align,
-  actionClassName = "flex flex-wrap items-center gap-4",
-}: {
-  action?: ReactNode;
-  secondaryAction?: ReactNode;
-  align?: "left" | "center";
-  actionClassName?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        actionClassName,
-        align === "center" && "justify-center",
-      )}
-    >
-      {action}
-      {secondaryAction}
-    </div>
-  );
-}

package/src/components/CTA/types.ts

@@ -1,12 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-export type CTAOption = "panel" | "surface" | "inverse";
-
-export interface CTAProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title: ReactNode;
-  description?: ReactNode;
-  action?: ReactNode;
-  secondaryAction?: ReactNode;
-  option?: CTAOption;
-  align?: "left" | "center";
-}