@ugurdemirel/landcraft 0.1.5 → 0.1.9

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.test.tsx

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

@@ -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";
-}

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

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

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

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

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

@@ -1,80 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-
-export type CardVariant = "outlined" | "elevated" | "inset";
-
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  variant?: CardVariant;
-  /** Softens the whole card with hover lift + border tint. */
-  interactive?: boolean;
-}
-
-const variants: Record<CardVariant, string> = {
-  outlined: "border border-border bg-surface",
-  elevated: "border border-border bg-surface shadow-soft",
-  inset: "bg-surface-strong",
-};
-
-export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant = "outlined", interactive = false, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "rounded-xl transition-[border-color,box-shadow,transform] duration-200",
-        variants[variant],
-        interactive &&
-          "cursor-pointer hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-raised",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Card.displayName = "Card";
-
-export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  icon?: ReactNode;
-}
-
-export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ className, icon, children, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col gap-2 p-6 pb-0", className)} {...props}>
-      {icon ? <div className="mb-1.5">{icon}</div> : null}
-      {children}
-    </div>
-  ),
-);
-CardHeader.displayName = "CardHeader";
-
-export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn("font-display text-lg font-semibold tracking-tight text-foreground", className)}
-      {...props}
-    />
-  ),
-);
-CardTitle.displayName = "CardTitle";
-
-export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("text-sm leading-6 text-muted-foreground", className)} {...props} />
-  ),
-);
-CardDescription.displayName = "CardDescription";
-
-export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-5", className)} {...props} />
-  ),
-);
-CardContent.displayName = "CardContent";
-
-export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center gap-3 border-t border-border/70 p-6 pt-5", className)} {...props} />
-  ),
-);
-CardFooter.displayName = "CardFooter";

package/src/components/Container.test.tsx

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

@@ -1,86 +0,0 @@
-import { forwardRef, type ElementType, type HTMLAttributes } from "react";
-import { cn } from "../utils/cn";
-
-export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
-
-export interface ContainerProps extends HTMLAttributes<HTMLElement> {
-  /** Render as a specific element (section, header, …). */
-  as?: ElementType;
-  /**
-   * Maximum content width:
-   * `sm` → prose · `md` → reading · `lg` → plans/splits ·
-   * `xl` → default marketing page · `full` → edge-to-edge.
-   */
-  size?: ContainerSize;
-  /** Responsive gutters (px-5 / sm:px-8). Disable for flush content. */
-  gutters?: boolean;
-}
-
-const sizes: Record<Exclude<ContainerSize, "full">, string> = {
-  sm: "max-w-xl",
-  md: "max-w-3xl",
-  lg: "max-w-5xl",
-  xl: "max-w-6xl",
-};
-
-/**
- * Shared layout wrapper — the single source of the container + gutter rules
- * used across Section, Footer, CTA, templates…
- */
-export const Container = forwardRef<HTMLElement, ContainerProps>(
-  ({ className, as, size = "xl", gutters = true, ...props }, ref) => {
-    const Tag = (as ?? "div") as ElementType;
-    return (
-      <Tag
-        ref={ref as never}
-        className={cn(
-          "mx-auto w-full",
-          size !== "full" && sizes[size],
-          gutters && "px-5 sm:px-8",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-Container.displayName = "Container";
-
-export type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20;
-
-const gaps: Record<StackGap, string> = {
-  0: "gap-0",
-  1: "gap-1",
-  2: "gap-2",
-  3: "gap-3",
-  4: "gap-4",
-  5: "gap-5",
-  6: "gap-6",
-  8: "gap-8",
-  10: "gap-10",
-  12: "gap-12",
-  16: "gap-16",
-  20: "gap-20",
-};
-
-export interface StackProps extends HTMLAttributes<HTMLDivElement> {
-  gap?: StackGap;
-  horizontal?: boolean;
-}
-
-/** Vertical (or horizontal) rhythm helper using flex gaps. */
-export const Stack = forwardRef<HTMLDivElement, StackProps>(
-  ({ className, gap = 4, horizontal = false, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "flex",
-        horizontal ? "flex-row flex-wrap items-center" : "flex-col",
-        gaps[gap],
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Stack.displayName = "Stack";