@ugurdemirel/landcraft 0.1.5 → 0.1.9

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

@@ -1,67 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { Pricing } from "./Pricing";
-
-const plans = [
-  {
-    name: "Starter",
-    monthly: 9,
-    yearly: 90,
-    features: ["1 project"],
-    cta: "Get started",
-  },
-  {
-    name: "Pro",
-    monthly: 29,
-    yearly: 290,
-    highlighted: true,
-    features: ["Unlimited projects"],
-    cta: "Go Pro",
-  },
-];
-
-describe("Pricing", () => {
-  it("renders plan names, prices and the cards option by default", () => {
-    render(<Pricing plans={plans} />);
-    expect(screen.getByText("Starter")).toBeInTheDocument();
-    expect(screen.getByText("Pro")).toBeInTheDocument();
-    // Monthly price for the starter plan is $9 (default billing = monthly).
-    expect(screen.getByText("$9")).toBeInTheDocument();
-  });
-
-  it("switches between monthly and yearly billing via the toggle", () => {
-    render(<Pricing plans={[plans[0]]} />);
-    expect(screen.getByText("$9")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByRole("switch"));
-    expect(screen.getByText("$90")).toBeInTheDocument();
-  });
-
-  it("renders the compact option", () => {
-    render(<Pricing plans={plans} option="compact" />);
-    expect(screen.getByText("Starter")).toBeInTheDocument();
-  });
-
-  it("renders the bento option", () => {
-    render(<Pricing plans={plans} option="bento" />);
-    expect(screen.getByText("Starter")).toBeInTheDocument();
-  });
-
-  it("calls onSelect with the plan and current billing when a plan button is pressed", () => {
-    const onSelect = vi.fn();
-    render(<Pricing plans={[plans[0]]} onSelect={onSelect} />);
-    fireEvent.click(screen.getByRole("button", { name: "Get started" }));
-    expect(onSelect).toHaveBeenCalledWith(plans[0], "monthly");
-  });
-
-  it("renders a price label for custom (null) pricing", () => {
-    render(
-      <Pricing
-        plans={[
-          { name: "Enterprise", monthly: null, yearly: null, features: [], cta: "Contact" },
-        ]}
-      />,
-    );
-    expect(screen.getByText("Custom")).toBeInTheDocument();
-  });
-});

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

package/src/components/Pricing/variants/Bento.tsx

@@ -1,72 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { getContrastText } from "../../../utils/contrast";
-import { PriceValue, PlanButton } from "../parts";
-import { Check } from "../../../icons";
-import type { PricingVariantProps } from "../types";
-
-interface BentoProps extends PricingVariantProps {
-  className?: string;
-}
-
-export const PricingBento = ({ className, plans, billing, onSelect, ...props }: BentoProps) => {
-  return (
-    <div className={cn("w-full", className)} {...props}>
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        {plans.map((plan) => {
-          const isHighlighted = plan.highlighted && !plan.customColor;
-          const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
-          const fg = plan.customColor
-            ? getContrastText(plan.customColor, "#111111", "#ffffff")
-            : isHighlighted
-              ? "rgb(var(--color-on-primary))"
-              : undefined;
-          return (
-            <div
-              key={plan.name}
-              className={cn(
-                "flex h-full flex-col rounded-xl p-8",
-                bg
-                  ? "lg:col-span-2"
-                  : "border border-border bg-surface",
-              )}
-              style={bg ? { backgroundColor: bg, color: fg } : undefined}
-            >
-              <div className="flex flex-wrap items-start justify-between gap-4">
-                <div>
-                  <h3 className={cn("font-display text-xl font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
-                    {plan.name}
-                  </h3>
-                  {plan.description ? (
-                    <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
-                      {plan.description}
-                    </p>
-                  ) : null}
-                </div>
-                <div className={cn("font-display", bg ? "text-current" : "text-foreground")}>
-                  <PriceValue value={billing === "monthly" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />
-                </div>
-              </div>
-              <ul
-                className={cn(
-                  "mt-7 grid grid-cols-1 gap-x-8 gap-y-2.5 text-sm sm:grid-cols-2",
-                  bg ? "lg:max-w-2xl" : undefined,
-                )}
-              >
-                {plan.features.map((feature) => (
-                  <li key={feature} className={cn("flex items-start gap-2.5", bg ? "text-current" : "text-muted-foreground")}>
-                    <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <div className="mt-8">
-                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-PricingBento.displayName = "PricingBento";

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

@@ -1,79 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { getContrastText } from "../../../utils/contrast";
-import { PriceValue, BillingToggle, PlanButton } from "../parts";
-import { Check } from "../../../icons";
-import type { PricingVariantProps } from "../types";
-
-interface CardsProps extends PricingVariantProps {
-  className?: string;
-  onBillingChange: (billing: "monthly" | "yearly") => void;
-}
-
-export const PricingCards = ({ className, plans, billing, onSelect, onBillingChange, ...props }: CardsProps) => {
-  return (
-    <div className={cn("w-full", className)} {...props}>
-      <BillingToggle billing={billing} onChange={onBillingChange} />
-      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
-        {plans.map((plan) => {
-          const isHighlighted = plan.highlighted && !plan.customColor;
-          const bg = plan.customColor || (isHighlighted ? "rgb(var(--color-primary))" : undefined);
-          const fg = plan.customColor
-            ? getContrastText(plan.customColor, "#111111", "#ffffff")
-            : isHighlighted
-              ? "rgb(var(--color-on-primary))"
-              : undefined;
-          return (
-            <div
-              key={plan.name}
-              className={cn(
-                "relative flex flex-col rounded-xl p-7",
-                bg ? "shadow-raised" : "border border-border bg-surface",
-                !bg && isHighlighted && "border-primary",
-              )}
-              style={bg ? { backgroundColor: bg, color: fg } : undefined}
-            >
-              {isHighlighted ? (
-                <span
-                  className={cn(
-                    "absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider",
-                    !bg && "bg-primary text-on-primary",
-                  )}
-                  style={
-                    bg
-                      ? { backgroundColor: "rgb(var(--color-on-primary))", color: "rgb(var(--color-primary))" }
-                      : undefined
-                  }
-                >
-                  Most popular
-                </span>
-              ) : null}
-              <h3 className={cn("font-display text-lg font-semibold tracking-tight", bg ? "text-current" : "text-foreground")}>
-                {plan.name}
-              </h3>
-              {plan.description ? (
-                <p className={cn("mt-1.5 text-sm", bg ? undefined : "text-muted-foreground")}>
-                  {plan.description}
-                </p>
-              ) : null}
-              <div className={cn("mt-6 flex items-baseline font-display", bg ? "text-current" : "text-foreground")}>
-                <PriceValue value={billing === "monthly" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />
-              </div>
-              <ul className={cn("mt-7 flex-1 space-y-2.5 text-sm", bg ? "text-current" : "text-muted-foreground")}>
-                {plan.features.map((feature) => (
-                  <li key={feature} className="flex items-start gap-2.5">
-                    <Check className={cn("mt-0.5 h-4 w-4 shrink-0", bg ? "text-current" : "text-primary")} />
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <div className="mt-8">
-                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-PricingCards.displayName = "PricingCards";

package/src/components/Pricing/variants/Compact.tsx

@@ -1,69 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { PlanButton } from "../parts";
-import { Check } from "../../../icons";
-import type { PricingVariantProps } from "../types";
-
-interface CompactProps extends PricingVariantProps {
-  className?: string;
-}
-
-export const PricingCompact = ({ className, plans, billing, onSelect, ...props }: CompactProps) => {
-  const price = (v: number | null) => (v === null ? "Custom" : `$${v}`);
-
-  return (
-    <div className={cn("w-full", className)} {...props}>
-      <div className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
-        {plans.map((plan) => {
-          const value = billing === "monthly" ? plan.monthly : plan.yearly;
-          const isHighlighted = plan.highlighted && !plan.customColor;
-          const bg = plan.customColor ? "rgb(var(--color-surface))" : isHighlighted ? "rgb(var(--color-primary-soft))" : undefined;
-          const fg = plan.customColor ? plan.customColor : isHighlighted ? "rgb(var(--color-primary))" : undefined;
-          return (
-            <div
-              key={plan.name}
-              className={cn(
-                "group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",
-                isHighlighted && "bg-primary-soft/60",
-              )}
-              style={bg ? { backgroundColor: bg } : undefined}
-            >
-              <div className="min-w-0">
-                <div className="flex items-center gap-2.5">
-                  <h3 className="font-display text-lg font-semibold tracking-tight text-foreground">
-                    {plan.name}
-                  </h3>
-                  {isHighlighted ? (
-                    <span className="rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider">
-                      Popular
-                    </span>
-                  ) : null}
-                </div>
-                {plan.description ? (
-                  <p className="mt-1 truncate text-sm text-muted-foreground">{plan.description}</p>
-                ) : null}
-              </div>
-              <div className="flex items-center gap-6">
-                <ul className="hidden items-center gap-4 lg:flex">
-                  {plan.features.slice(0, 3).map((f) => (
-                    <li key={f} className="flex items-center gap-1.5 text-sm text-muted-foreground" style={{ color: fg }}>
-                      <Check className="h-3.5 w-3.5 text-current" />
-                      {f}
-                    </li>
-                  ))}
-                </ul>
-                <div className="font-display text-2xl font-semibold tracking-tight text-foreground">
-                  {price(value)}
-                  {value !== null ? (
-                    <span className="text-sm font-normal text-muted-foreground">/{billing === "monthly" ? "mo" : "yr"}</span>
-                  ) : null}
-                </div>
-                <PlanButton plan={plan} billing={billing} onSelect={onSelect} />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-PricingCompact.displayName = "PricingCompact";

package/src/components/Prose.test.tsx

@@ -1,49 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { Prose, ProseLead } from "./Prose";
-
-describe("Prose", () => {
-  it("renders an article element with prose classes", () => {
-    render(<Prose>Text</Prose>);
-    const article = screen.getByText("Text");
-    expect(article.tagName).toBe("ARTICLE");
-    expect(article).toHaveClass("prose");
-  });
-
-  it("applies the requested size", () => {
-    render(<Prose size="xl">Text</Prose>);
-    expect(screen.getByText("Text")).toHaveClass("prose-xl");
-  });
-
-  it("caps width by default and removes it when wide", () => {
-    render(<Prose>Capped</Prose>);
-    expect(screen.getByText("Capped")).toHaveClass("max-w-3xl");
-
-    render(<Prose wide>Wide</Prose>);
-    expect(screen.getByText("Wide")).not.toHaveClass("max-w-3xl");
-  });
-
-  it("renders children", () => {
-    render(
-      <Prose>
-        <h1>Heading</h1>
-      </Prose>,
-    );
-    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
-  });
-
-  it("renders raw HTML via the html prop instead of children", () => {
-    render(<Prose html="<h2>CMS content</h2><p>A paragraph.</p>" />);
-    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent("CMS content");
-    expect(screen.getByText("A paragraph.")).toBeInTheDocument();
-  });
-});
-
-describe("ProseLead", () => {
-  it("renders a lead-styled paragraph", () => {
-    render(<ProseLead>Intro</ProseLead>);
-    const p = screen.getByText("Intro");
-    expect(p.tagName).toBe("P");
-    expect(p).toHaveClass("lead");
-  });
-});