@ugurdemirel/landcraft 0.1.3 → 0.1.5

package/src/components/Hero/types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type HeroVariant = "split" | "centered" | "statement";
+
+export interface HeroMeta {
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  variant?: HeroVariant;
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  primaryAction?: ReactNode;
+  secondaryAction?: ReactNode;
+  media?: ReactNode;
+  /** Small trust/status row shown under the copy or CTAs. */
+  meta?: HeroMeta[];
+}

package/src/components/Hero/variants/Centered.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { HeroActions, HeroEyebrow, heroContainer, heroTitleBase } from "../parts";
+import type { HeroProps } from "../types";
+
+/** Centered — understated, one statement, generous white space. */
+export const HeroCentered = forwardRef<HTMLElement, HeroProps>(
+  (
+    { className, eyebrow, title, description, primaryAction, secondaryAction, media, meta, id, ...props },
+    ref,
+  ) => (
+    <section
+      ref={ref}
+      id={id}
+      className={cn("relative w-full border-b border-border bg-background", className)}
+      {...props}
+    >
+      <div className={cn(heroContainer, "pt-24 pb-20 text-center sm:pt-32 sm:pb-24")}>
+        <HeroEyebrow eyebrow={eyebrow} />
+        <h1 className={cn(heroTitleBase, "mt-7 max-w-4xl text-5xl leading-[1.04] sm:text-6xl lg:text-7xl")}>
+          {title}
+        </h1>
+        {description ? (
+          <p className="mx-auto mt-7 max-w-xl text-pretty leading-relaxed text-muted-foreground sm:text-lg">
+            {description}
+          </p>
+        ) : null}
+        {primaryAction || secondaryAction ? (
+          <div className="mt-10 justify-center">
+            <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />
+          </div>
+        ) : null}
+        {meta ? (
+          <ul className="mt-14 flex flex-wrap items-center justify-center gap-x-9 gap-y-3">
+            {meta.map((m, i) => (
+              <li
+                key={m.label}
+                className={cn(
+                  "flex items-center gap-2 text-sm text-muted-foreground",
+                  i > 0 && "sm:border-l sm:border-border sm:pl-9",
+                )}
+              >
+                {m.icon ? <span className="text-foreground/35">{m.icon}</span> : null}
+                {m.label}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {media ? <div className="mt-16 w-full">{media}</div> : null}
+      </div>
+    </section>
+  ),
+);
+HeroCentered.displayName = "HeroCentered";

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

@@ -0,0 +1,53 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { HeroActions, HeroEyebrow, heroContainer, heroTitleBase } from "../parts";
+import type { HeroProps } from "../types";
+
+/** Split — editorial grid: huge type left, media right, meta rule under. */
+export const HeroSplit = forwardRef<HTMLElement, HeroProps>(
+  (
+    { className, eyebrow, title, description, primaryAction, secondaryAction, media, meta, id, ...props },
+    ref,
+  ) => (
+    <section
+      ref={ref}
+      id={id}
+      className={cn("relative w-full border-b border-border bg-background", className)}
+      {...props}
+    >
+      <div className={cn(
+        heroContainer,
+        "items-start gap-14 pt-20 pb-20 sm:pt-28 sm:pb-28 lg:grid lg:grid-cols-[1.05fr_0.95fr] lg:gap-20",
+      )}>
+        <div className="max-w-xl">
+          <HeroEyebrow eyebrow={eyebrow} />
+          <h1 className={cn(heroTitleBase, "mt-6 text-5xl leading-[1.03] sm:text-6xl lg:text-7xl")}>
+            {title}
+          </h1>
+          {description ? (
+            <p className="mt-7 max-w-md text-pretty leading-relaxed text-muted-foreground sm:text-lg">
+              {description}
+            </p>
+          ) : null}
+          {primaryAction || secondaryAction ? (
+            <div className="mt-10">
+              <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />
+            </div>
+          ) : null}
+          {meta ? (
+            <ul className="mt-14 flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-border pt-6">
+              {meta.map((m) => (
+                <li key={m.label} className="flex items-center gap-2 text-sm text-muted-foreground">
+                  {m.icon ? <span className="text-foreground/35">{m.icon}</span> : null}
+                  {m.label}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        {media ? <div className="w-full self-center">{media}</div> : null}
+      </div>
+    </section>
+  ),
+);
+HeroSplit.displayName = "HeroSplit";

package/src/components/Hero/variants/Statement.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { useTokenForeground } from "../../../utils/useTokenForeground";
+import { HeroActions, heroContainer } from "../parts";
+import type { HeroProps } from "../types";
+
+/** Statement — full-bleed ink band. No eyebrow, pure message. */
+export const HeroStatement = forwardRef<HTMLElement, HeroProps>(
+  (
+    { className, title, description, primaryAction, secondaryAction, media, meta, id, ...props },
+    ref,
+  ) => {
+    // Statement paints its own background from --color-secondary, so the
+    // readable text color must be derived from THAT token, not the brand.
+    const fg = useTokenForeground("--color-secondary");
+
+    return (
+      <section
+        ref={ref}
+        id={id}
+        className={cn("relative w-full overflow-hidden bg-secondary", className)}
+        style={{ color: fg }}
+        {...props}
+      >
+        <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 inset-x-0 top-0 h-px bg-white/10" />
+        <div className={cn(heroContainer, "pt-28 pb-24 text-center sm:pt-36 sm:pb-32")}>
+          <h1
+            className="max-w-5xl font-display text-[2.9rem] font-semibold leading-[1.02] tracking-[-0.04em] text-balance sm:text-7xl lg:text-8xl"
+            style={{ color: fg }}
+          >
+            {title}
+          </h1>
+          {description ? (
+            <p className="mx-auto mt-8 max-w-xl text-pretty leading-relaxed sm:text-lg" style={{ color: fg, opacity: 0.72 }}>
+              {description}
+            </p>
+          ) : null}
+          {primaryAction || secondaryAction ? (
+            <div className="mt-11 justify-center">
+              <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />
+            </div>
+          ) : null}
+          {meta ? (
+            <ul className="mt-16 flex flex-wrap items-center justify-center gap-x-10 gap-y-3">
+              {meta.map((m) => (
+                <li key={m.label} className="flex items-center gap-2 text-sm font-medium" style={{ color: fg, opacity: 0.72 }}>
+                  {m.icon ? <span>{m.icon}</span> : null}
+                  {m.label}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);
+HeroStatement.displayName = "HeroStatement";

package/src/components/LanguageSwitcher/LanguageSwitcher.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+
+const languages = [
+  { code: "tr", label: "Türkçe" },
+  { code: "en", label: "English" },
+];
+
+function trigger(container: HTMLElement): HTMLButtonElement {
+  // The dropdown trigger is the only button with aria-haspopup="listbox".
+  return container.querySelector('button[aria-haspopup="listbox"]')!;
+}
+
+describe("LanguageSwitcher", () => {
+  it("renders a trigger showing the current language (dropdown by default)", () => {
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="tr" />,
+    );
+    expect(trigger(container)).toBeInTheDocument();
+    expect(trigger(container)).toHaveTextContent("Türkçe");
+  });
+
+  it("opens a listbox and selects a language via onChange", () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="en" onChange={onChange} />,
+    );
+
+    fireEvent.click(trigger(container));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("option", { name: /Türkçe/ }));
+    expect(onChange).toHaveBeenCalledWith("tr");
+  });
+
+  it("marks the active option as selected", () => {
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="en" />,
+    );
+    fireEvent.click(trigger(container));
+
+    const enOption = screen.getByRole("option", { name: /English/ });
+    expect(enOption).toHaveAttribute("aria-selected", "true");
+    const trOption = screen.getByRole("option", { name: /Türkçe/ });
+    expect(trOption).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("collapses the dropdown after selecting a language", () => {
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="en" />,
+    );
+    fireEvent.click(trigger(container));
+    expect(trigger(container)).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.click(screen.getByRole("option", { name: /English/ }));
+    expect(trigger(container)).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("renders nothing when there are no languages", () => {
+    const { container } = render(<LanguageSwitcher languages={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -0,0 +1,37 @@
+"use client";
+import type { LanguageSwitcherProps } from "./types";
+import { useLanguageSwitcher } from "./useLanguageSwitcher";
+import { LanguageSwitcherDropdown } from "./variants/Dropdown";
+import { LanguageSwitcherModal } from "./variants/Modal";
+
+export const LanguageSwitcher = ({
+  option = "dropdown",
+  languages,
+  value,
+  defaultValue,
+  onChange,
+  ...props
+}: LanguageSwitcherProps) => {
+  const state = useLanguageSwitcher(languages, value, defaultValue, onChange);
+
+  if (languages.length === 0) return null;
+
+  const variantProps = {
+    languages,
+    value,
+    defaultValue,
+    onChange,
+    ...props,
+    open: state.open,
+    onOpenChange: state.setOpen,
+    current: state.current,
+    currentLang: state.currentLang,
+    setCurrent: state.setCurrent,
+  };
+
+  if (option === "modal") {
+    return <LanguageSwitcherModal {...variantProps} />;
+  }
+  return <LanguageSwitcherDropdown {...variantProps} />;
+};
+LanguageSwitcher.displayName = "LanguageSwitcher";

package/src/components/LanguageSwitcher/index.ts

@@ -0,0 +1,6 @@
+export { LanguageSwitcher } from "./LanguageSwitcher";
+export type {
+  LanguageSwitcherProps,
+  LanguageSwitcherOption,
+  LanguageOption,
+} from "./types";

package/src/components/LanguageSwitcher/parts.tsx

@@ -0,0 +1,144 @@
+"use client";
+import { useEffect } from "react";
+import { cn } from "../../utils/cn";
+import { iso2ToFlagEmoji } from "../../utils/iso2Flag";
+import { Check, ChevronDown, Globe } from "../../icons";
+import type { LanguageOption } from "./types";
+
+export function useOutsideClose(
+  open: boolean,
+  rootRef: { current: HTMLDivElement | null },
+  onClose: () => void,
+) {
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, rootRef, onClose]);
+}
+
+export function renderFlagOrGlobe(
+  code: string,
+  { size = "text-sm", globeClass = "text-muted-foreground" }: { size?: string; globeClass?: string } = {},
+) {
+  const flag = iso2ToFlagEmoji(code);
+  return flag ? (
+    <span aria-hidden className={cn(size, "leading-none")}>
+      {flag}
+    </span>
+  ) : (
+    <Globe className={cn("h-4 w-4 shrink-0", globeClass)} />
+  );
+}
+
+export function LanguageTrigger({
+  inverse,
+  open,
+  showFlag,
+  currentLang,
+  onClick,
+  ariaProps,
+}: {
+  inverse?: boolean;
+  open: boolean;
+  showFlag?: boolean;
+  currentLang: LanguageOption;
+  onClick: () => void;
+  ariaProps: {
+    haspopup: "listbox" | "dialog";
+    expanded: boolean;
+    controls?: string;
+  };
+}) {
+  return (
+    <button
+      type="button"
+      aria-haspopup={ariaProps.haspopup}
+      aria-expanded={ariaProps.expanded}
+      aria-controls={ariaProps.controls}
+      onClick={onClick}
+      className={cn(
+        "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border px-3 text-[13px] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        inverse
+          ? "border-white/10 text-on-secondary hover:bg-white/10"
+          : "border-border text-foreground hover:bg-surface",
+      )}
+    >
+      {showFlag ? (
+        renderFlagOrGlobe(currentLang.code, { globeClass: inverse ? "opacity-70" : "text-muted-foreground" })
+      ) : (
+        <Globe
+          className={cn("h-4 w-4", inverse ? "opacity-70" : "text-muted-foreground")}
+        />
+      )}
+      <span className="tracking-tight">{currentLang.label}</span>
+      <ChevronDown
+        className={cn(
+          "h-3.5 w-3.5 transition-transform duration-150",
+          open && "rotate-180",
+          inverse ? "opacity-70" : "text-muted-foreground",
+        )}
+      />
+    </button>
+  );
+}
+
+export function LanguageOptionRow({
+  lang,
+  active,
+  onSelect,
+  variant,
+  showFlag,
+}: {
+  lang: LanguageOption;
+  active: boolean;
+  onSelect: () => void;
+  variant: "dropdown" | "modal";
+  showFlag?: boolean;
+}) {
+  return (
+    <button
+      key={lang.code}
+      type="button"
+      role="option"
+      aria-selected={active}
+      onClick={onSelect}
+      className={
+        variant === "modal"
+          ? cn(
+              "flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border px-4 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              active
+                ? "border-primary/40 bg-primary-soft text-foreground"
+                : "border-border text-foreground hover:bg-surface-strong",
+            )
+          : cn(
+              "flex w-full cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-2 text-[13px] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              active
+                ? "bg-surface-strong text-foreground"
+                : "text-muted-foreground hover:bg-surface-strong hover:text-foreground",
+            )
+      }
+    >
+      <span className={variant === "modal" ? "flex items-center gap-3" : "flex items-center gap-2.5"}>
+        {showFlag ? renderFlagOrGlobe(lang.code, variant === "modal" ? { size: "text-base" } : {}) : null}
+        <span className="text-sm font-medium">{lang.label}</span>
+      </span>
+      <span className={variant === "modal" ? "flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground" : undefined}>
+        {variant === "modal" ? lang.code : null}
+        {active ? <Check className={variant === "modal" ? "h-4 w-4 text-primary" : "h-3.5 w-3.5 text-primary"} /> : null}
+      </span>
+    </button>
+  );
+}

package/src/components/LanguageSwitcher/types.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export interface LanguageOption {
+  /** Language code (ISO 3166-1 alpha-2, e.g. `"tr"`) — this is the value passed to `onChange` and the flag source. */
+  code: string;
+  /** Native display name, e.g. `"Türkçe"`. */
+  label: string;
+}
+
+export type LanguageSwitcherOption = "dropdown" | "modal";
+
+export interface LanguageSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** `dropdown` opens the anchored menu; `modal` opens a full dialog via the Modal component. */
+  option?: LanguageSwitcherOption;
+  /** Languages to switch between. Required — no built-in default language list. */
+  languages: LanguageOption[];
+  /** Controlled current language code. */
+  value?: string;
+  /** Uncontrolled initial language code. Defaults to the first language. */
+  defaultValue?: string;
+  /** Called with the selected language code. */
+  onChange?: (code: string) => void;
+  /** Dropdown menu alignment relative to its trigger. Defaults to `end`. */
+  align?: "start" | "end";
+  /** Heading rendered inside the `modal` option. Optional — pass it to show a title. */
+  modalTitle?: ReactNode;
+  /** Replace the globe icon with the selected language's flag emoji (and show flags in options). */
+  showFlag?: boolean;
+  /** Adapts colors for dark surfaces (inverse Navbar, classic Footer). */
+  inverse?: boolean;
+}
+
+export interface LanguageSwitcherVariantProps
+  extends Omit<LanguageSwitcherProps, "option"> {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  current: string;
+  currentLang: LanguageOption;
+  setCurrent: (code: string) => void;
+}

package/src/components/LanguageSwitcher/useLanguageSwitcher.ts

@@ -0,0 +1,23 @@
+"use client";
+import { useState } from "react";
+import type { LanguageOption } from "./types";
+
+export function useLanguageSwitcher(
+  languages: LanguageOption[],
+  value?: string,
+  defaultValue?: string,
+  onChange?: (code: string) => void,
+) {
+  const [open, setOpen] = useState(false);
+  const [internal, setInternal] = useState(defaultValue ?? languages[0]?.code ?? "");
+  const current = value ?? internal;
+  const currentLang = languages.find((l) => l.code === current) ?? languages[0];
+
+  const setCurrent = (code: string) => {
+    setInternal(code);
+    setOpen(false);
+    onChange?.(code);
+  };
+
+  return { open, setOpen, current, currentLang, setCurrent };
+}

package/src/components/LanguageSwitcher/variants/Dropdown.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { useId, useRef, type CSSProperties } from "react";
+import { cn } from "../../../utils/cn";
+import {
+  useOutsideClose,
+  LanguageTrigger,
+  LanguageOptionRow,
+} from "../parts";
+import type { LanguageSwitcherVariantProps } from "../types";
+
+export function LanguageSwitcherDropdown({
+  className,
+  languages,
+  open,
+  onOpenChange,
+  current,
+  currentLang,
+  setCurrent,
+  align = "end",
+  showFlag = false,
+  inverse = false,
+  modalTitle,
+  value,
+  defaultValue,
+  onChange,
+  ...props
+}: LanguageSwitcherVariantProps) {
+  const listboxId = useId();
+  const anchorName = `--ls-${listboxId.replace(/:/g, "")}`;
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useOutsideClose(open, rootRef, () => onOpenChange(false));
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn("relative inline-flex", className)}
+      {...props}
+    >
+      <button
+        type="button"
+        style={{ anchorName } as CSSProperties}
+        onClick={() => onOpenChange(!open)}
+      >
+        <LanguageTrigger
+          inverse={inverse}
+          open={open}
+          showFlag={showFlag}
+          currentLang={currentLang}
+          onClick={() => onOpenChange(!open)}
+          ariaProps={{ haspopup: "listbox", expanded: open, controls: listboxId }}
+        />
+      </button>
+
+      <div
+        id={listboxId}
+        role="listbox"
+        aria-label="Select language"
+        style={
+          {
+            positionAnchor: anchorName,
+            top: "anchor(bottom)",
+            ...(align === "start" ? { left: "anchor(left)" } : { right: "anchor(right)" }),
+          } as CSSProperties
+        }
+        className={cn(
+          "absolute top-full z-50 mt-2 min-w-[10rem] rounded-lg border border-border bg-surface p-1 shadow-raised transition-all duration-150",
+          align === "start" ? "left-0" : "right-0",
+          open
+            ? "visible translate-y-0 opacity-100"
+            : "pointer-events-none invisible -translate-y-1 opacity-0",
+        )}
+      >
+        {languages.map((lang) => (
+          <LanguageOptionRow
+            key={lang.code}
+            lang={lang}
+            active={lang.code === current}
+            onSelect={() => setCurrent(lang.code)}
+            variant="dropdown"
+            showFlag={showFlag}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+LanguageSwitcherDropdown.displayName = "LanguageSwitcherDropdown";

package/src/components/LanguageSwitcher/variants/Modal.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Modal } from "../../Modal";
+import { LanguageTrigger, LanguageOptionRow } from "../parts";
+import type { LanguageSwitcherVariantProps } from "../types";
+
+export function LanguageSwitcherModal({
+  className,
+  languages,
+  open,
+  onOpenChange,
+  current,
+  currentLang,
+  setCurrent,
+  modalTitle,
+  showFlag = false,
+  inverse = false,
+  align,
+  value,
+  defaultValue,
+  onChange,
+  ...props
+}: LanguageSwitcherVariantProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <div ref={rootRef} className={cn("relative inline-flex", className)} {...props}>
+        <LanguageTrigger
+          inverse={inverse}
+          open={open}
+          showFlag={showFlag}
+          currentLang={currentLang}
+          onClick={() => onOpenChange(!open)}
+          ariaProps={{ haspopup: "dialog", expanded: open }}
+        />
+      </div>
+      <Modal open={open} onClose={() => onOpenChange(false)} title={modalTitle} size="sm">
+        <div role="listbox" aria-label="Select language" className="grid min-w-[19rem] gap-1.5">
+          {languages.map((lang) => (
+            <LanguageOptionRow
+              key={lang.code}
+              lang={lang}
+              active={lang.code === current}
+              onSelect={() => setCurrent(lang.code)}
+              variant="modal"
+              showFlag={showFlag}
+            />
+          ))}
+        </div>
+      </Modal>
+    </>
+  );
+}
+LanguageSwitcherModal.displayName = "LanguageSwitcherModal";