@ugurdemirel/landcraft 0.1.3 → 0.1.5

package/src/components/CTA/parts.tsx

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

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

package/src/components/CTA/variants/Inverse.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import { useTokenForeground } from "../../../utils/useTokenForeground";
+import { CTAActions } from "../parts";
+import type { CTAProps } from "../types";
+
+/** inverse — ink panel with a wide left-aligned split. */
+export const CTAInverse = forwardRef<HTMLElement, CTAProps>(
+  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => {
+    const fg = useTokenForeground("--color-secondary");
+
+    return (
+      <section ref={ref} id={id} className={cn("w-full py-6 pb-20", className)} {...props}>
+        <Container>
+          <div
+            className="relative overflow-hidden rounded-[1.75rem] px-7 py-16 sm:px-16 sm:py-20"
+            style={{
+              backgroundColor: "rgb(var(--color-secondary))",
+              color: fg,
+            }}
+          >
+            <div aria-hidden className="pointer-events-none absolute inset-0 grain opacity-[0.09] mix-blend-overlay" />
+            <div
+              className={cn(
+                "relative flex flex-col items-start gap-10",
+                align === "center" && "items-center text-center",
+                "lg:flex-row lg:items-end lg:justify-between",
+              )}
+            >
+              <div className={cn("max-w-3xl", align === "center" && "mx-auto")}>
+                <h2 className="font-display text-balance text-4xl font-semibold leading-[1.02] tracking-[-0.03em] sm:text-6xl">
+                  {title}
+                </h2>
+                {description ? (
+                  <p className={cn("mt-5 max-w-xl text-pretty text-base leading-7 sm:text-lg", align === "center" && "mx-auto")}>
+                    {description}
+                  </p>
+                ) : null}
+              </div>
+              <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
+            </div>
+          </div>
+        </Container>
+      </section>
+    );
+  },
+);
+CTAInverse.displayName = "CTAInverse";

package/src/components/CTA/variants/Panel.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import { useTokenForeground } from "../../../utils/useTokenForeground";
+import { CTAActions } from "../parts";
+import type { CTAProps } from "../types";
+
+/** panel — brand gradient panel, rounded corners. */
+export const CTAPanel = forwardRef<HTMLElement, CTAProps>(
+  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => {
+    const fg = useTokenForeground("--color-primary");
+
+    return (
+      <section ref={ref} id={id} className={cn("w-full py-6 pb-20", className)} {...props}>
+        <Container>
+          <div
+            className="relative overflow-hidden rounded-[1.75rem] px-7 py-14 sm:px-14 sm:py-20"
+            style={{
+              background:
+                "radial-gradient(120% 160% at 0% 0%, rgb(var(--color-primary)), rgb(var(--color-primary-hover)) 55%, rgb(var(--color-primary) / 0.85))",
+              color: fg,
+            }}
+          >
+            <div aria-hidden className="pointer-events-none absolute inset-0 grain opacity-[0.07] mix-blend-overlay" />
+            <div
+              aria-hidden
+              className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full"
+              style={{ background: "rgb(var(--color-accent))", opacity: 0.35, filter: "blur(60px)" }}
+            />
+            <div
+              className={cn(
+                "relative flex flex-col gap-9",
+                align === "center" ? "items-center text-center" : "items-start",
+              )}
+            >
+              <div className={cn("max-w-2xl", align === "center" && "mx-auto")}>
+                <h2 className="font-display text-balance text-3xl font-semibold leading-[1.06] tracking-[-0.02em] sm:text-5xl">
+                  {title}
+                </h2>
+                {description ? (
+                  <p
+                    className={cn(
+                      "mt-4 text-pretty text-base leading-7 sm:text-lg",
+                      align === "center" && "mx-auto max-w-xl",
+                    )}
+                  >
+                    {description}
+                  </p>
+                ) : null}
+              </div>
+              <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
+            </div>
+          </div>
+        </Container>
+      </section>
+    );
+  },
+);
+CTAPanel.displayName = "CTAPanel";

package/src/components/CTA/variants/Surface.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import { CTAActions } from "../parts";
+import type { CTAProps } from "../types";
+
+/** surface — quiet paper band: hairline rule, big display type, actions right. */
+export const CTASurface = forwardRef<HTMLElement, CTAProps>(
+  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => (
+    <section ref={ref} id={id} className={cn("w-full", className)} {...props}>
+      <Container className="py-20 sm:py-24">
+        <div
+          className={cn(
+            "flex flex-col gap-10 border-t border-border pt-14 sm:flex-row sm:items-end sm:justify-between sm:pt-16",
+            align === "center" && "items-center text-center sm:flex-col sm:items-center",
+          )}
+        >
+          <div className={cn("max-w-3xl", align === "center" && "mx-auto")}>
+            <h2 className="font-display text-4xl font-semibold leading-[1.03] tracking-[-0.03em] text-balance text-foreground sm:text-6xl">
+              {title}
+            </h2>
+            {description ? (
+              <p className={cn("mt-5 max-w-xl text-pretty text-base leading-7 text-muted-foreground sm:text-lg", align === "center" && "mx-auto")}>
+                {description}
+              </p>
+            ) : null}
+          </div>
+          <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
+        </div>
+      </Container>
+    </section>
+  ),
+);
+CTASurface.displayName = "CTASurface";

package/src/components/Card.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "./Card";
+
+describe("Card & subcomponents", () => {
+  it("renders an outlined card by default", () => {
+    render(<Card>Content</Card>);
+    expect(screen.getByText("Content")).toHaveClass("border-border");
+  });
+
+  it("applies a custom variant", () => {
+    render(<Card variant="elevated">Elevated</Card>);
+    expect(screen.getByText("Elevated")).toHaveClass("shadow-soft");
+  });
+
+  it("adds interactive styling when interactive", () => {
+    render(<Card interactive>Interactive</Card>);
+    expect(screen.getByText("Interactive")).toHaveClass("hover:-translate-y-0.5");
+  });
+
+  it("renders the full composite header/content/footer", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+        <CardContent>Body</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>,
+    );
+    expect(screen.getByText("Title")).toBeInTheDocument();
+    expect(screen.getByText("Description")).toBeInTheDocument();
+    expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Footer")).toBeInTheDocument();
+  });
+
+  it("renders an icon in the header when provided", () => {
+    render(<CardHeader icon={<span data-testid="hdr-icon" />}>Header</CardHeader>);
+    expect(screen.getByTestId("hdr-icon")).toBeInTheDocument();
+  });
+});

package/src/components/Container.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Container, Stack } from "./Container";
+
+describe("Container", () => {
+  it("renders a div by default", () => {
+    render(<Container>Body</Container>);
+    const el = screen.getByText("Body");
+    expect(el.tagName).toBe("DIV");
+    expect(el).toHaveClass("mx-auto");
+  });
+
+  it("applies a size class", () => {
+    render(<Container size="sm">Body</Container>);
+    expect(screen.getByText("Body")).toHaveClass("max-w-xl");
+  });
+
+  it("does not cap width for the full size", () => {
+    render(<Container size="full">Body</Container>);
+    expect(screen.getByText("Body")).not.toHaveClass("max-w-xl", "max-w-6xl");
+  });
+
+  it("adds gutters by default and removes them with gutters=false", () => {
+    render(<Container>A</Container>);
+    expect(screen.getByText("A")).toHaveClass("px-5");
+
+    render(<Container gutters={false}>B</Container>);
+    expect(screen.getByText("B")).not.toHaveClass("px-5");
+  });
+
+  it("renders as the requested element via `as`", () => {
+    render(<Container as="section">Body</Container>);
+    expect(screen.getByText("Body").tagName).toBe("SECTION");
+  });
+});
+
+describe("Stack", () => {
+  it("renders a vertical flex by default", () => {
+    render(<Stack>A</Stack>);
+    expect(screen.getByText("A")).toHaveClass("flex", "flex-col");
+  });
+
+  it("renders horizontal when horizontal", () => {
+    render(<Stack horizontal>A</Stack>);
+    expect(screen.getByText("A")).toHaveClass("flex-row");
+  });
+
+  it("applies a gap", () => {
+    render(<Stack gap={6}>A</Stack>);
+    expect(screen.getByText("A")).toHaveClass("gap-6");
+  });
+});

package/src/components/FAQ/FAQ.test.tsx

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { FAQ } from "./FAQ";
+
+const items = [
+  { question: "How do I install it?", answer: "Run pnpm add." },
+  { question: "How do I theme it?", answer: "Set --color-primary." },
+];
+
+describe("FAQ", () => {
+  it("renders all questions and the accordion option by default", () => {
+    render(<FAQ items={items} />);
+    expect(screen.getByText("How do I install it?")).toBeInTheDocument();
+    expect(screen.getByText("How do I theme it?")).toBeInTheDocument();
+  });
+
+  it("expands an answer when a question is activated", () => {
+    render(<FAQ items={items} />);
+    const q = screen.getByRole("button", { name: "How do I install it?" });
+    expect(q).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(q);
+    expect(q).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("Run pnpm add.")).toBeInTheDocument();
+  });
+
+  it("closes the first item when another is opened (single open by default)", () => {
+    render(<FAQ items={items} />);
+    fireEvent.click(screen.getByRole("button", { name: "How do I install it?" }));
+    fireEvent.click(screen.getByRole("button", { name: "How do I theme it?" }));
+
+    // Only the second question's answer is visible.
+    expect(screen.getByText("Set --color-primary.")).toBeInTheDocument();
+    expect(screen.queryByText("Run pnpm add.")).not.toBeInTheDocument();
+  });
+
+  it("keeps multiple items open when allowMultiple is set", () => {
+    render(<FAQ items={items} allowMultiple />);
+    fireEvent.click(screen.getByRole("button", { name: "How do I install it?" }));
+    fireEvent.click(screen.getByRole("button", { name: "How do I theme it?" }));
+
+    expect(screen.getByText("Run pnpm add.")).toBeInTheDocument();
+    expect(screen.getByText("Set --color-primary.")).toBeInTheDocument();
+  });
+
+  it("renders the split and cards options", () => {
+    const { rerender } = render(<FAQ items={items} option="split" />);
+    expect(screen.getByText("How do I install it?")).toBeInTheDocument();
+
+    rerender(<FAQ items={items} option="cards" />);
+    expect(screen.getByText("How do I install it?")).toBeInTheDocument();
+    expect(screen.getByText("Run pnpm add.")).toBeInTheDocument();
+  });
+});

package/src/components/FAQ/FAQ.tsx

@@ -0,0 +1,48 @@
+import type { FAQProps } from "./types";
+import { FaqCards } from "./variants/Cards";
+import { FaqAccordion } from "./variants/Accordion";
+import { FaqSplit } from "./variants/Split";
+
+export const FAQ = ({
+  className,
+  items,
+  option = "accordion",
+  allowMultiple = false,
+  defaultOpen = [],
+  eyebrow,
+  title,
+  description,
+  ...props
+}: FAQProps) => {
+  if (option === "cards") {
+    return <FaqCards className={className} items={items} eyebrow={eyebrow} {...props} />;
+  }
+
+  if (option === "split") {
+    return (
+      <FaqSplit
+        className={className}
+        items={items}
+        allowMultiple={allowMultiple}
+        defaultOpen={defaultOpen}
+        eyebrow={eyebrow}
+        title={title}
+        description={description}
+        {...props}
+      />
+    );
+  }
+
+  // accordion
+  return (
+    <div className="mx-auto w-full max-w-3xl">
+      <FaqAccordion
+        className={className}
+        items={items}
+        allowMultiple={allowMultiple}
+        defaultOpen={defaultOpen}
+      />
+    </div>
+  );
+};
+FAQ.displayName = "FAQ";

package/src/components/FAQ/index.ts

@@ -0,0 +1,2 @@
+export { FAQ } from "./FAQ";
+export type { FAQProps, FAQOption, FaqItem } from "./types";

package/src/components/FAQ/parts.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useState } from "react";
+import { cn } from "../../utils/cn";
+import { Plus } from "../../icons";
+import type { FaqItem } from "./types";
+
+export function useFaqState(allowMultiple: boolean, defaultOpen: number[]) {
+  const [openSet, setOpenSet] = useState<Set<number>>(
+    () => new Set(allowMultiple ? defaultOpen : defaultOpen.slice(0, 1)),
+  );
+
+  const toggle = (index: number) => {
+    setOpenSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        if (!allowMultiple) next.clear();
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  return { openSet, toggle, isOpen: (i: number) => openSet.has(i) };
+}
+
+export function FaqItemRow({
+  item,
+  open,
+  onToggle,
+  style,
+}: {
+  item: FaqItem;
+  open: boolean;
+  onToggle: () => void;
+  style: "boxed" | "bare";
+}) {
+  return (
+    <div>
+      <h3>
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={onToggle}
+          className={
+            style === "boxed"
+              ? "flex w-full cursor-pointer items-center justify-between gap-4 px-6 py-5 text-left text-[15px] font-medium text-foreground transition-colors duration-150 hover:bg-surface-strong/60 focus-visible:outline-none"
+              : "flex w-full cursor-pointer items-center justify-between gap-4 py-5 text-left text-base font-semibold text-foreground transition-colors duration-150 focus-visible:outline-none"
+          }
+        >
+          {item.question}
+          <Plus
+            className={cn(
+              "h-4.5 w-4.5 shrink-0 text-foreground/45 transition-transform duration-200 sm:h-5 sm:w-5",
+              open && "rotate-45 text-primary",
+            )}
+          />
+        </button>
+      </h3>
+      {open ? (
+        <p className={style === "boxed" ? "px-6 pb-6 text-sm leading-7 text-muted-foreground" : "pb-6 text-sm leading-7 text-muted-foreground"}>
+          {item.answer}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function FaqEyebrow({ label }: { label: string }) {
+  return (
+    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">{label}</p>
+  );
+}

package/src/components/FAQ/types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type FAQOption = "accordion" | "split" | "cards";
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+export interface FAQProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  items: FaqItem[];
+  option?: FAQOption;
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+}

package/src/components/FAQ/variants/Accordion.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../../../utils/cn";
+import { useFaqState, FaqItemRow } from "../parts";
+import type { FAQProps } from "../types";
+
+interface AccordionProps extends FAQProps {
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+  bare?: boolean;
+}
+
+export const FaqAccordion = ({
+  className,
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  bare = false,
+  option,
+  title,
+  eyebrow,
+  description,
+  ...props
+}: AccordionProps) => {
+  const { isOpen, toggle } = useFaqState(allowMultiple, defaultOpen);
+
+  return (
+    <div
+      className={cn(
+        !bare && "divide-y divide-border rounded-2xl border border-border bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {items.map((item, index) => (
+        <FaqItemRow
+          key={item.question}
+          item={item}
+          open={isOpen(index)}
+          onToggle={() => toggle(index)}
+          style={bare ? "bare" : "boxed"}
+        />
+      ))}
+    </div>
+  );
+};
+FaqAccordion.displayName = "FaqAccordion";

package/src/components/FAQ/variants/Cards.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../../../utils/cn";
+import { FaqEyebrow } from "../parts";
+import type { FAQProps } from "../types";
+
+interface CardsProps extends FAQProps {}
+
+export const FaqCards = ({
+  className,
+  items,
+  eyebrow,
+  title,
+  description,
+  option,
+  ...props
+}: CardsProps) => (
+  <div className={cn("w-full", className)} {...props}>
+    {eyebrow ? <div className="mb-10"><FaqEyebrow label={String(eyebrow)} /></div> : null}
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {items.map((item, i) => (
+        <div
+          key={item.question}
+          className="flex flex-col rounded-xl border border-border bg-surface p-7"
+        >
+          <div className="flex items-baseline gap-4">
+            <span className="font-display text-sm font-semibold tabular-nums text-foreground/35">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <h3 className="font-display text-lg font-semibold tracking-tight text-foreground">
+              {item.question}
+            </h3>
+          </div>
+          <p className="mt-4 border-t border-border pt-4 text-sm leading-6 text-muted-foreground">
+            {item.answer}
+          </p>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+FaqCards.displayName = "FaqCards";

package/src/components/FAQ/variants/Split.tsx

@@ -0,0 +1,44 @@
+import { cn } from "../../../utils/cn";
+import { FaqEyebrow } from "../parts";
+import { FaqAccordion } from "./Accordion";
+import type { FAQProps } from "../types";
+
+interface SplitProps extends FAQProps {
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+}
+
+export const FaqSplit = ({
+  className,
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  eyebrow,
+  title,
+  description,
+  option,
+  ...props
+}: SplitProps) => (
+  <div className={cn("grid w-full gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:gap-20", className)} {...props}>
+    <div className="lg:sticky lg:top-24 lg:self-start">
+      {eyebrow ? <FaqEyebrow label={String(eyebrow)} /> : null}
+      {title ? (
+        <h2 className="mt-4 font-display 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>
+    <div className="divide-y divide-border">
+      <FaqAccordion
+        items={items}
+        allowMultiple={allowMultiple}
+        defaultOpen={defaultOpen}
+        bare
+      />
+    </div>
+  </div>
+);
+FaqSplit.displayName = "FaqSplit";

package/src/components/Features/FeatureCard.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+import { getContrastText } from "../../utils/contrast";
+import type { FeatureCardProps } from "./types";
+
+export const FeatureCard = forwardRef<HTMLDivElement, FeatureCardProps>(
+  ({ className, icon, title, description, accent, large = false, ...props }, ref) => {
+    const chipStyle = accent
+      ? { backgroundColor: accent, color: getContrastText(accent, "#111111", "#ffffff") }
+      : undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group relative flex h-full flex-col rounded-xl border border-border bg-surface p-7 transition-colors duration-200 hover:border-foreground/15",
+          className,
+        )}
+        {...props}
+      >
+        {icon ? (
+          <div
+            className={cn(
+              "mb-5 inline-flex h-10 w-10 items-center justify-center rounded-lg text-[1.05rem]",
+              !accent && "bg-primary-soft text-primary",
+            )}
+            style={chipStyle}
+          >
+            {icon}
+          </div>
+        ) : null}
+        <h3 className={cn("font-display font-semibold tracking-tight text-foreground", large ? "text-2xl" : "text-lg")}>
+          {title}
+        </h3>
+        {description ? (
+          <p className={cn("mt-2.5 text-pretty leading-relaxed text-muted-foreground", large ? "text-[15px]" : "text-sm")}>
+            {description}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+FeatureCard.displayName = "FeatureCard";