@ugurdemirel/landcraft 0.1.4 → 0.1.9

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.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";

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

@@ -1,54 +0,0 @@
-"use client";
-import { cn } from "../../../utils/cn";
-import { ArrowRight } from "../../../icons";
-import { useNewsletterForm } from "../useNewsletterForm";
-import { inputBase, NewsletterSuccess, NewsletterNote } from "../parts";
-import type { NewsletterProps } from "../types";
-
-interface InlineProps extends Omit<NewsletterProps, "option"> {}
-
-export function NewsletterInline({
-  className,
-  placeholder = "you@company.com",
-  buttonLabel = "Join",
-  successMessage = "You’re on the list!",
-  note,
-  onSubmit,
-  ...props
-}: InlineProps) {
-  const { email, done, error, handleSubmit, updateEmail } = useNewsletterForm(onSubmit);
-
-  return (
-    <form onSubmit={handleSubmit} className={cn("w-full", className)} {...props}>
-      {done ? (
-        <NewsletterSuccess message={successMessage} />
-      ) : (
-        <>
-          <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} />
-        </>
-      )}
-    </form>
-  );
-}
-NewsletterInline.displayName = "NewsletterInline";

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

@@ -1,52 +0,0 @@
-"use client";
-import { cn } from "../../../utils/cn";
-import { ArrowRight } from "../../../icons";
-import { useNewsletterForm } from "../useNewsletterForm";
-import { NewsletterSuccess, NewsletterNote } from "../parts";
-import type { NewsletterProps } from "../types";
-
-interface UnderlineProps extends Omit<NewsletterProps, "option"> {}
-
-export function NewsletterUnderline({
-  className,
-  placeholder = "you@company.com",
-  buttonLabel = "Join",
-  successMessage = "You’re on the list!",
-  note,
-  onSubmit,
-  ...props
-}: UnderlineProps) {
-  const { email, done, error, handleSubmit, updateEmail } = useNewsletterForm(onSubmit);
-
-  return (
-    <form onSubmit={handleSubmit} className={cn("w-full", className)} {...props}>
-      {done ? (
-        <NewsletterSuccess message={successMessage} />
-      ) : (
-        <div className="flex items-end gap-3 border-b border-foreground/20 pb-3 transition-colors duration-200 focus-within:border-foreground">
-          <label htmlFor="newsletter-email" className="sr-only">
-            Your email address
-          </label>
-          <input
-            id="newsletter-email"
-            type="email"
-            autoComplete="email"
-            value={email}
-            onChange={(e) => updateEmail(e.target.value)}
-            placeholder={placeholder}
-            className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
-          />
-          <button
-            type="submit"
-            className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 text-sm font-semibold text-foreground transition-colors duration-150 hover:text-primary"
-          >
-            {buttonLabel}
-            <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
-          </button>
-        </div>
-      )}
-      <NewsletterNote error={error} note={note} />
-    </form>
-  );
-}
-NewsletterUnderline.displayName = "NewsletterUnderline";

package/src/components/Pricing/Pricing.tsx

@@ -1,37 +0,0 @@
-"use client";
-import { useState } from "react";
-import type { PricingProps } from "./types";
-import { PricingCards } from "./variants/Cards";
-import { PricingBento } from "./variants/Bento";
-import { PricingCompact } from "./variants/Compact";
-
-export const Pricing = ({
-  className,
-  plans,
-  option = "cards",
-  defaultBilling = "monthly",
-  onSelect,
-  ...props
-}: PricingProps) => {
-  const [billing, setBilling] = useState<"monthly" | "yearly">(defaultBilling);
-
-  if (option === "compact") {
-    return <PricingCompact className={className} plans={plans} billing={billing} onSelect={onSelect} {...props} />;
-  }
-
-  if (option === "bento") {
-    return <PricingBento className={className} plans={plans} billing={billing} onSelect={onSelect} {...props} />;
-  }
-
-  return (
-    <PricingCards
-      className={className}
-      plans={plans}
-      billing={billing}
-      onSelect={onSelect}
-      onBillingChange={setBilling}
-      {...props}
-    />
-  );
-};
-Pricing.displayName = "Pricing";

package/src/components/Pricing/index.ts

@@ -1,2 +0,0 @@
-export { Pricing } from "./Pricing";
-export type { PricingProps, PricingOption, Plan } from "./types";

package/src/components/Pricing/parts.tsx

@@ -1,132 +0,0 @@
-"use client";
-import { cn } from "../../utils/cn";
-import { getContrastText } from "../../utils/contrast";
-import { useTokenForeground } from "../../utils/useTokenForeground";
-import { ArrowRight } from "../../icons";
-import type { Plan } from "./types";
-
-export function PriceValue({
-  value,
-  billing,
-  dim,
-}: {
-  value: number | null;
-  billing: "monthly" | "yearly";
-  /** False when rendered on a colored background where opacity would kill contrast. */
-  dim?: boolean;
-}) {
-  if (value === null) {
-    return <span>Custom</span>;
-  }
-  return (
-    <>
-      <span className="text-[2.6rem] font-semibold tracking-tight sm:text-[3rem]">${value}</span>
-      <span className={cn("text-sm font-normal", dim && "opacity-60")}>
-        /{billing === "monthly" ? "mo" : "yr"}
-      </span>
-    </>
-  );
-}
-
-export function BillingToggle({
-  billing,
-  onChange,
-  dark,
-}: {
-  billing: "monthly" | "yearly";
-  onChange: (b: "monthly" | "yearly") => void;
-  dark?: boolean;
-}) {
-  // The accent token is a background color, but its shipped "on-accent"
-  // pairing isn't guaranteed to be contrast-safe (e.g. white on amber).
-  // Derive the badge text color from the actual accent value instead.
-  const accentText = useTokenForeground("--color-accent");
-  return (
-    <div className="mb-10 flex items-center justify-center gap-4">
-      <span
-        className={cn(
-          "text-sm font-medium transition-colors",
-          billing === "monthly" ? (dark ? "text-white" : "text-foreground") : "text-muted-foreground",
-        )}
-      >
-        Monthly
-      </span>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={billing === "yearly"}
-        aria-label="Billing period"
-        onClick={() => onChange(billing === "monthly" ? "yearly" : "monthly")}
-        className={cn(
-          "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          billing === "yearly" ? "bg-primary" : "bg-border",
-        )}
-      >
-        <span
-          className={cn(
-            "inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200",
-            billing === "yearly" ? "translate-x-6" : "translate-x-1",
-          )}
-        />
-      </button>
-      <span
-        className={cn(
-          "flex items-center gap-2 text-sm font-medium transition-colors",
-          billing === "yearly" ? (dark ? "text-white" : "text-foreground") : "text-muted-foreground",
-        )}
-      >
-        Yearly
-        <span
-          className="rounded-full bg-accent px-2 py-0.5 text-xs font-semibold"
-          style={{ color: accentText }}
-        >
-          −2 ay
-        </span>
-      </span>
-    </div>
-  );
-}
-
-export function PlanButton({
-  plan,
-  billing,
-  onSelect,
-  dark,
-}: {
-  plan: Plan;
-  billing: "monthly" | "yearly";
-  onSelect?: (plan: Plan, billing: "monthly" | "yearly") => void;
-  dark?: boolean;
-}) {
-  const isHighlighted = plan.highlighted && !plan.customColor;
-  const fg = plan.customColor ? getContrastText(plan.customColor, "#111111", "#ffffff") : undefined;
-  return (
-    <button
-      type="button"
-      onClick={() => onSelect?.(plan, billing)}
-      className={cn(
-        "inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-lg px-5 text-sm font-semibold transition-colors duration-200",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        isHighlighted || plan.customColor
-          ? "hover:brightness-95"
-          : dark
-            ? "bg-white text-black hover:bg-white/90"
-            : "border border-border text-foreground hover:bg-surface",
-      )}
-      style={
-        plan.customColor
-          ? { backgroundColor: plan.customColor, color: fg }
-          : isHighlighted
-            ? {
-                backgroundColor: "rgb(var(--color-primary))",
-                color: "rgb(var(--color-on-primary))",
-              }
-            : undefined
-      }
-    >
-      {plan.cta || "Start"}
-      <ArrowRight className="h-4 w-4 opacity-60" />
-    </button>
-  );
-}

package/src/components/Pricing/types.ts

@@ -1,28 +0,0 @@
-import type { HTMLAttributes } from "react";
-
-export type PricingOption = "cards" | "bento" | "compact";
-
-export interface Plan {
-  name: string;
-  description?: string;
-  monthly: number | null;
-  yearly: number | null;
-  features: string[];
-  cta?: string;
-  href?: string;
-  highlighted?: boolean;
-  customColor?: string;
-}
-
-export interface PricingProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  plans: Plan[];
-  option?: PricingOption;
-  defaultBilling?: "monthly" | "yearly";
-  onSelect?: (plan: Plan, billing: "monthly" | "yearly") => void;
-}
-
-export interface PricingVariantProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  plans: Plan[];
-  billing: "monthly" | "yearly";
-  onSelect?: (plan: Plan, billing: "monthly" | "yearly") => void;
-}