@ugurdemirel/landcraft 0.1.5 → 0.1.9

package/src/components/Modal.tsx

@@ -1,125 +0,0 @@
-"use client";
-import { forwardRef, useEffect, useId, useRef, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { X } from "../icons";
-
-export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  open: boolean;
-  onClose: () => void;
-  /** Dialog heading (required for a11y; auto-linked via `aria-labelledby`). */
-  title?: ReactNode;
-  description?: ReactNode;
-  /** Rendered below the content, e.g. actions. */
-  footer?: ReactNode;
-  /** Content width. Defaults to `md`. */
-  size?: "sm" | "md" | "lg";
-}
-
-const sizes: Record<NonNullable<ModalProps["size"]>, string> = {
-  sm: "max-w-sm",
-  md: "max-w-lg",
-  lg: "max-w-2xl",
-};
-
-/**
- * Accessible dialog built on the HTML Popover API.
- *
- * `popover="auto"` renders in the top layer and gives light-dismiss (outside
- * click + `Escape`), automatic focus movement and restoration for free, so no
- * portal, focus trap or key handlers are needed. State stays controlled via
- * `open` / `onClose`.
- */
-export const Modal = forwardRef<HTMLDivElement, ModalProps>(
-  ({ className, open, onClose, title, description, footer, size = "md", children, ...props }, ref) => {
-    const titleId = useId();
-    const descriptionId = useId();
-    const internalRef = useRef<HTMLDivElement | null>(null);
-    const onCloseRef = useRef(onClose);
-
-    useEffect(() => {
-      onCloseRef.current = onClose;
-    }, [onClose]);
-
-    useEffect(() => {
-      const el = internalRef.current;
-      if (!el) return;
-      if (!el.hasAttribute("popover")) el.setAttribute("popover", "auto");
-    }, []);
-
-    useEffect(() => {
-      const el = internalRef.current;
-      if (!el) return;
-      if (open) {
-        if (!el.matches(":popover-open")) el.showPopover();
-        document.body.style.overflow = "hidden";
-      } else {
-        if (el.matches(":popover-open")) el.hidePopover();
-        document.body.style.overflow = "";
-      }
-    }, [open]);
-
-    useEffect(() => {
-      const el = internalRef.current;
-      if (!el) return;
-      const onToggle = (event: Event) => {
-        if ((event as ToggleEvent).newState === "closed") onCloseRef.current?.();
-      };
-      el.addEventListener("toggle", onToggle);
-      return () => el.removeEventListener("toggle", onToggle);
-    }, []);
-
-    useEffect(
-      () => () => {
-        document.body.style.overflow = "";
-      },
-      [],
-    );
-
-    return (
-      <div
-        ref={(node) => {
-          internalRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        }}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? titleId : undefined}
-        aria-describedby={description ? descriptionId : undefined}
-        className={cn(
-          "modal-anim modal-backdrop fixed inset-0 z-[100] m-auto h-fit max-h-[calc(100vh-2rem)] w-fit max-w-[calc(100vw-2rem)] overflow-y-auto rounded-2xl border border-border bg-surface p-6 text-foreground shadow-overlay",
-          sizes[size],
-          className,
-        )}
-        {...props}
-      >
-        {title ? (
-          <h2
-            id={titleId}
-            className="pr-8 font-display text-lg font-semibold tracking-tight text-foreground"
-          >
-            {title}
-          </h2>
-        ) : null}
-        {description ? (
-          <p id={descriptionId} className="mt-1.5 text-sm leading-6 text-muted-foreground">
-            {description}
-          </p>
-        ) : null}
-        <button
-          type="button"
-          aria-label="Close dialog"
-          onClick={onClose}
-          className="absolute right-4 top-4 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-surface-strong hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          <X className="h-4 w-4" />
-        </button>
-        <div className={title || description ? "mt-4" : "pt-8"}>{children}</div>
-        {footer ? (
-          <div className="mt-6 flex flex-wrap items-center justify-end gap-3">{footer}</div>
-        ) : null}
-      </div>
-    );
-  },
-);
-Modal.displayName = "Modal";

package/src/components/Navbar/Navbar.test.tsx

@@ -1,91 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Navbar } from "./Navbar";
-
-const links = [
-  { label: "Product", href: "#product" },
-  { label: "Pricing", href: "#pricing" },
-];
-
-describe("Navbar", () => {
-  it("renders brand, nav links and the action slot", () => {
-    render(<Navbar brand="Acurio" links={links} cta={<button>Start</button>} />);
-    const nav = screen.getByRole("navigation", { name: "Main navigation" });
-
-    expect(screen.getByText("Acurio")).toBeInTheDocument();
-    // Both the desktop list and the mobile panel render a "Product" link.
-    const productLinks = within(nav).getAllByRole("link", { name: "Product" });
-    expect(productLinks.length).toBeGreaterThan(0);
-    expect(productLinks[0]).toHaveAttribute("href", "#product");
-    expect(screen.getAllByRole("button", { name: "Start" }).length).toBeGreaterThan(0);
-  });
-
-  it("renders the brand href via brandHref", () => {
-    render(<Navbar brand="Acurio" links={links} brandHref="/" />);
-    const nav = screen.getByRole("navigation", { name: "Main navigation" });
-    expect(nav.querySelector('a[href="/"]')).toBeInTheDocument();
-  });
-
-  it("applies the classic variant shell", () => {
-    render(<Navbar brand="Acurio" links={links} variant="classic" />);
-    expect(screen.getByRole("banner")).toHaveClass("bg-background/85");
-  });
-
-  it("applies the inverse variant shell and on-secondary link tokens", () => {
-    render(<Navbar brand="Acurio" links={links} variant="inverse" />);
-    expect(screen.getByRole("banner")).toHaveClass("bg-[#101010]/85");
-    const productLinks = screen.getAllByRole("link", { name: "Product" });
-    expect(productLinks[0]).toHaveClass("text-on-secondary/60");
-  });
-
-  it("renders a custom logo instead of the wordmark", () => {
-    render(
-      <Navbar brand="Acurio" links={links} logo={<span data-testid="logo">Logo</span>} />,
-    );
-    expect(screen.getByTestId("logo")).toBeInTheDocument();
-    expect(screen.queryByText("Acurio")).not.toBeInTheDocument();
-  });
-
-  it("starts collapsed and toggles the mobile menu via the hamburger", async () => {
-    const user = userEvent.setup();
-    render(<Navbar brand="Acurio" links={links} />);
-    expect(screen.getByRole("button", { name: "Open menu" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-
-    await user.click(screen.getByRole("button", { name: "Open menu" }));
-    expect(screen.getByRole("button", { name: "Close menu" })).toHaveAttribute(
-      "aria-expanded",
-      "true",
-    );
-
-    await user.click(screen.getByRole("button", { name: "Close menu" }));
-    expect(screen.getByRole("button", { name: "Open menu" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-  });
-
-  it("closes the mobile menu when a mobile link is clicked", async () => {
-    const user = userEvent.setup();
-    render(<Navbar brand="Acurio" links={links} />);
-
-    await user.click(screen.getByRole("button", { name: "Open menu" }));
-    expect(screen.getByRole("button", { name: "Close menu" })).toBeInTheDocument();
-
-    // Two "Product" links exist (desktop + mobile); tapping one collapses.
-    const product = screen.getAllByRole("link", { name: "Product" })[1];
-    await user.click(product);
-    expect(screen.getByRole("button", { name: "Open menu" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-  });
-
-  it("is not sticky when sticky is disabled", () => {
-    render(<Navbar brand="Acurio" links={links} sticky={false} />);
-    expect(screen.getByRole("banner")).not.toHaveClass("sticky");
-  });
-});

package/src/components/Navbar/Navbar.tsx

@@ -1,185 +0,0 @@
-"use client";
-import { useState } from "react";
-import { cn } from "../../utils/cn";
-import { Menu, X } from "../../icons";
-import type { NavbarProps, NavbarVariant } from "./types";
-
-interface NavbarStyle {
-  shell: string;
-  bar: string;
-  header: string;
-  link: string;
-  mobilePanel: string;
-  mobileLink: string;
-  menuButton: string;
-  brandText: string;
-  brandDot: string;
-  desktopList: string;
-}
-
-const inverse = "text-on-secondary";
-const light = "text-foreground";
-
-const styles: Record<NavbarVariant, NavbarStyle> = {
-  classic: {
-    shell: "border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75",
-    bar: "mx-auto max-w-6xl px-5 sm:px-8",
-    header: "px-0",
-    link: "text-muted-foreground hover:text-foreground",
-    mobilePanel: "border-t border-border bg-background",
-    mobileLink:
-      "text-muted-foreground hover:bg-surface hover:text-foreground",
-    menuButton: `${light} hover:bg-surface`,
-    brandText: light,
-    brandDot: "bg-foreground",
-    desktopList: "hidden items-center gap-7 md:flex",
-  },
-  floating: {
-    shell: "px-0",
-    bar: "mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70",
-    header: "px-3 sm:px-6",
-    link: "text-muted-foreground hover:text-foreground",
-    mobilePanel:
-      "mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface",
-    mobileLink:
-      "text-muted-foreground hover:bg-surface hover:text-foreground",
-    menuButton: `${light} hover:bg-surface`,
-    brandText: light,
-    brandDot: "bg-foreground",
-    desktopList: "hidden items-center gap-7 md:flex",
-  },
-  inverse: {
-    shell: "border-b border-white/10 bg-[#101010]/85 backdrop-blur-md",
-    bar: "mx-auto max-w-6xl px-5 sm:px-8",
-    header: "px-0",
-    link: "text-on-secondary/60 hover:text-on-secondary",
-    mobilePanel: "border-t border-white/10 bg-[#101010]",
-    mobileLink:
-      "text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary",
-    menuButton: `${inverse} hover:bg-white/10`,
-    brandText: inverse,
-    brandDot: "bg-on-secondary",
-    desktopList: "hidden items-center gap-7 md:flex",
-  },
-};
-
-export const Navbar = ({
-  className,
-  variant = "classic",
-  brand,
-  logo,
-  logoSrc,
-  logoAlt,
-  logoClassName,
-  brandHref = "#",
-  links,
-  actions,
-  cta,
-  languageSwitcher,
-  sticky = true,
-  LinkComponent,
-  ...props
-}: NavbarProps) => {
-  const [open, setOpen] = useState(false);
-  const Link = LinkComponent ?? "a";
-  const s = styles[variant];
-
-  const logoNode =
-    logo ??
-    (logoSrc ? (
-      <img
-        src={logoSrc}
-        alt={logoAlt ?? (typeof brand === "string" ? brand : "Logo")}
-        className={cn("h-7 w-auto", logoClassName)}
-      />
-    ) : null);
-
-  const brandNode = logoNode ? (
-    <span className="flex items-center">{logoNode}</span>
-  ) : (
-    <span className={cn("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", s.brandText)}>
-      <span aria-hidden className={cn("inline-block h-2.5 w-2.5 rounded-sm", s.brandDot)} />
-      {brand}
-    </span>
-  );
-
-  return (
-    <header className={cn("w-full transition-colors duration-200", sticky && "sticky top-0 z-50", s.shell, s.header, className)} {...props}>
-      <nav className={cn("flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200", s.bar)} aria-label="Main navigation">
-        <Link href={brandHref} className="shrink-0">
-          {brandNode}
-        </Link>
-
-        <ul className={s.desktopList}>
-          {links.map((link) => (
-            <li key={link.href}>
-              <Link
-                href={link.href}
-                className={cn("text-sm font-medium transition-colors duration-150", s.link)}
-              >
-                {link.label}
-              </Link>
-            </li>
-          ))}
-        </ul>
-
-        <div className="hidden items-center gap-3 md:flex">
-          {languageSwitcher}
-          {actions}
-          {cta}
-        </div>
-
-        {languageSwitcher ? (
-          <div className="flex items-center md:hidden">{languageSwitcher}</div>
-        ) : null}
-
-        <button
-          type="button"
-          aria-label={open ? "Close menu" : "Open menu"}
-          aria-expanded={open}
-          onClick={() => setOpen((o) => !o)}
-          className={cn(
-            "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden",
-            "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            s.menuButton,
-          )}
-        >
-          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-        </button>
-      </nav>
-
-      <div
-        className={cn(
-          "grid transition-[grid-template-rows,opacity] duration-200 md:hidden",
-          open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-          s.mobilePanel,
-        )}
-      >
-        <div className="min-h-0 overflow-hidden">
-          <ul className={cn("flex flex-col py-4", variant !== "floating" && "px-5")}>
-            {links.map((link) => (
-              <li key={link.href}>
-                <Link
-                  href={link.href}
-                  onClick={() => setOpen(false)}
-                  className={cn(
-                    "block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
-                    s.mobileLink,
-                  )}
-                >
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-            {cta ? (
-              <li className="mt-3 px-2 pb-2">{cta}</li>
-            ) : actions ? (
-              <li className="mt-3 flex flex-wrap gap-3 px-2 pb-2">{actions}</li>
-            ) : null}
-          </ul>
-        </div>
-      </div>
-    </header>
-  );
-};
-Navbar.displayName = "Navbar";

package/src/components/Navbar/index.ts

@@ -1,2 +0,0 @@
-export { Navbar } from "./Navbar";
-export type { NavbarProps, NavbarVariant, NavLink } from "./types";

package/src/components/Navbar/types.ts

@@ -1,30 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from "react";
-
-export interface NavLink {
-  label: string;
-  href: string;
-}
-
-export type NavbarVariant = "classic" | "floating" | "inverse";
-
-export interface NavbarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  variant?: NavbarVariant;
-  /** Wordmark or fallback text rendered when no logo is supplied. */
-  brand?: ReactNode;
-  /** Custom logo node (component, <img>, inline SVG…). Replaces the wordmark. */
-  logo?: ReactNode;
-  /** Quick logo image source. */
-  logoSrc?: string;
-  logoAlt?: string;
-  /** Size / position tuning for logo images. Defaults to `h-7 w-auto`. */
-  logoClassName?: string;
-  brandHref?: string;
-  links: NavLink[];
-  actions?: ReactNode;
-  cta?: ReactNode;
-  /** Optional language switcher rendered on the right (desktop) and beside the menu button (mobile). */
-  languageSwitcher?: ReactNode;
-  sticky?: boolean;
-  /** Component used to render the brand and nav links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
-  LinkComponent?: ElementType;
-}

package/src/components/Newsletter/Newsletter.test.tsx

@@ -1,45 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Newsletter } from "./Newsletter";
-
-describe("Newsletter", () => {
-  it("renders the field and submit button (inline by default)", () => {
-    render(<Newsletter />);
-    expect(screen.getByLabelText("Your email address")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Join" })).toBeInTheDocument();
-  });
-
-  it("calls onSubmit with a valid email and shows the success message", async () => {
-    const user = userEvent.setup();
-    const onSubmit = vi.fn();
-    render(<Newsletter onSubmit={onSubmit} successMessage="You're in!" />);
-    await user.type(screen.getByLabelText("Your email address"), "foo@bar.com");
-    await user.click(screen.getByRole("button", { name: "Join" }));
-
-    expect(onSubmit).toHaveBeenCalledWith("foo@bar.com");
-    expect(screen.getByRole("status")).toHaveTextContent("You're in!");
-  });
-
-  it("shows a validation error when an empty/invalid value is submitted", async () => {
-    const user = userEvent.setup();
-    const onSubmit = vi.fn();
-    render(<Newsletter onSubmit={onSubmit} />);
-    // Submit without entering a value; the component's own regex rejects it.
-    await user.click(screen.getByRole("button", { name: "Join" }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(screen.getByRole("alert")).toHaveTextContent("valid email");
-  });
-
-  it("renders the note text when provided", () => {
-    render(<Newsletter note="Once a month." />);
-    expect(screen.getByText("Once a month.")).toBeInTheDocument();
-  });
-
-  it("renders the card and underline options", () => {
-    const { container } = render(<Newsletter option="card" />);
-    expect(container.querySelector("form")).toBeInTheDocument();
-    render(<Newsletter option="underline" />);
-  });
-});

package/src/components/Newsletter/Newsletter.tsx

@@ -1,12 +0,0 @@
-import type { NewsletterProps } from "./types";
-import { NewsletterInline } from "./variants/Inline";
-import { NewsletterCard } from "./variants/Card";
-import { NewsletterUnderline } from "./variants/Underline";
-
-export const Newsletter = (props: NewsletterProps) => {
-  const { option = "inline", ...rest } = props;
-  if (option === "card") return <NewsletterCard {...rest} />;
-  if (option === "underline") return <NewsletterUnderline {...rest} />;
-  return <NewsletterInline {...rest} />;
-};
-Newsletter.displayName = "Newsletter";

package/src/components/Newsletter/index.ts

@@ -1,2 +0,0 @@
-export { Newsletter } from "./Newsletter";
-export type { NewsletterProps, NewsletterOption } from "./types";

package/src/components/Newsletter/parts.tsx

@@ -1,23 +0,0 @@
-import { Check } from "../../icons";
-
-export const inputBase =
-  "w-full rounded-lg border border-border bg-surface px-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background";
-
-export function NewsletterSuccess({ message }: { message: string }) {
-  return (
-    <p className="flex items-center gap-2 rounded-lg border border-accent/40 bg-accent/10 px-4 py-3.5 text-sm font-medium text-accent" role="status">
-      <Check className="h-4 w-4" />
-      {message}
-    </p>
-  );
-}
-
-export function NewsletterNote({ error, note }: { error: string | null; note?: string }) {
-  if (error) {
-    return <p className="mt-2 text-sm font-medium text-red-500" role="alert">{error}</p>;
-  }
-  if (note) {
-    return <p className="mt-3 text-xs leading-5 text-muted-foreground">{note}</p>;
-  }
-  return null;
-}

package/src/components/Newsletter/types.ts

@@ -1,12 +0,0 @@
-import type { HTMLAttributes } from "react";
-
-export type NewsletterOption = "inline" | "card" | "underline";
-
-export interface NewsletterProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
-  option?: NewsletterOption;
-  placeholder?: string;
-  buttonLabel?: string;
-  successMessage?: string;
-  note?: string;
-  onSubmit?: (email: string) => void;
-}

package/src/components/Newsletter/useNewsletterForm.ts

@@ -1,27 +0,0 @@
-"use client";
-import { useState, type FormEvent } from "react";
-
-export function useNewsletterForm(onSubmit?: (email: string) => void) {
-  const [email, setEmail] = useState("");
-  const [done, setDone] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = (event: FormEvent) => {
-    event.preventDefault();
-    const value = email.trim();
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-      setError("Please enter a valid email.");
-      return;
-    }
-    setError(null);
-    setDone(true);
-    onSubmit?.(value);
-  };
-
-  const updateEmail = (value: string) => {
-    setEmail(value);
-    if (error) setError(null);
-  };
-
-  return { email, done, error, handleSubmit, updateEmail };
-}

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

@@ -1,62 +0,0 @@
-"use client";
-import { cn } from "../../../utils/cn";
-import { ArrowRight, Mail } from "../../../icons";
-import { useNewsletterForm } from "../useNewsletterForm";
-import { inputBase, NewsletterSuccess, NewsletterNote } from "../parts";
-import type { NewsletterProps } from "../types";
-
-interface CardProps extends Omit<NewsletterProps, "option"> {}
-
-export function NewsletterCard({
-  className,
-  placeholder = "you@company.com",
-  buttonLabel = "Join",
-  successMessage = "You’re on the list!",
-  note,
-  onSubmit,
-  ...props
-}: CardProps) {
-  const { email, done, error, handleSubmit, updateEmail } = useNewsletterForm(onSubmit);
-
-  return (
-    <form onSubmit={handleSubmit} className={cn("w-full", className)} {...props}>
-      {done ? (
-        <NewsletterSuccess message={successMessage} />
-      ) : (
-        <div className="rounded-xl border border-border bg-surface p-7">
-          <div className="mb-5 flex items-center gap-3">
-            <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary-soft text-primary">
-              <Mail className="h-4 w-4" />
-            </span>
-            <p className="font-display text-lg font-semibold tracking-tight text-foreground">
-              Monthly digest
-            </p>
-          </div>
-          <label htmlFor="newsletter-email" className="sr-only">
-            Your email address
-          </label>
-          <div className="flex flex-col gap-3 sm:flex-row">
-            <input
-              id="newsletter-email"
-              type="email"
-              autoComplete="email"
-              value={email}
-              onChange={(e) => updateEmail(e.target.value)}
-              placeholder={placeholder}
-              className={cn(inputBase, "h-11")}
-            />
-            <button
-              type="submit"
-              className="inline-flex h-11 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-5 text-sm font-semibold text-on-primary transition-colors duration-200 hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-            >
-              {buttonLabel}
-              <ArrowRight className="h-4 w-4 opacity-60" />
-            </button>
-          </div>
-          <NewsletterNote error={error} note={note} />
-        </div>
-      )}
-    </form>
-  );
-}
-NewsletterCard.displayName = "NewsletterCard";