@ugurdemirel/landcraft 0.1.0 → 0.1.2

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ugurrdemirel/landcraft.git"
+  },
   "description": "Marketing/landing-page focused React component library built on Tailwind CSS with token-based theming and automatic contrast.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,11 +20,10 @@
       "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/styles.css",
-    "./tailwind-preset": "./tailwind.preset.cjs"
+    "./theme.css": "./src/styles/theme.css"
   },
   "files": [
     "dist",
-    "tailwind.preset.cjs",
     "src",
     "README.md"
   ],
@@ -38,7 +41,7 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15"
   },
   "peerDependenciesMeta": {
@@ -51,15 +54,14 @@
     "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0"

package/src/components/Blog.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "../utils/cn";
 import { ArrowRight, ArrowUpRight } from "../icons";
 import { Badge } from "./Badge";
@@ -41,6 +41,8 @@ function AuthorMark({ name, avatar }: { name: string; avatar?: ReactNode }) {
 export interface BlogCardProps extends HTMLAttributes<HTMLAnchorElement> {
   post: BlogPost;
   option?: "card" | "row";
+  /** Component used to render the card link. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
 }
 
 const Cover = ({ post }: { post: BlogPost }) =>
@@ -65,10 +67,12 @@ const Cover = ({ post }: { post: BlogPost }) =>
   );
 
 export const BlogCard = forwardRef<HTMLAnchorElement, BlogCardProps>(
-  ({ className, post, option = "card", ...props }, ref) => {
+  ({ className, post, option = "card", LinkComponent, ...props }, ref) => {
+    const Link = LinkComponent ?? "a";
+
     if (option === "row") {
       return (
-        <a
+        <Link
           ref={ref}
           href={post.href ?? "#"}
           className={cn("group flex cursor-pointer items-baseline gap-5 py-6", className)}
@@ -89,13 +93,13 @@ export const BlogCard = forwardRef<HTMLAnchorElement, BlogCardProps>(
           <span className="text-foreground/30 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground">
             <ArrowUpRight className="h-5 w-5" />
           </span>
-        </a>
+        </Link>
       );
     }
 
     const author = post.author;
     return (
-      <a
+      <Link
         ref={ref}
         href={post.href ?? "#"}
         className={cn(
@@ -134,7 +138,7 @@ export const BlogCard = forwardRef<HTMLAnchorElement, BlogCardProps>(
             <ArrowRight className="h-4 w-4 text-foreground/35 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground" />
           </div>
         </div>
-      </a>
+      </Link>
     );
   },
 );
@@ -153,6 +157,8 @@ export interface BlogSectionProps
   description?: ReactNode;
   showAllLabel?: string;
   showAllHref?: string;
+  /** Component used to render the "show all" link and post cards. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
 }
 
 const gridCols: Record<NonNullable<BlogSectionProps["columns"]>, string> = {
@@ -174,11 +180,13 @@ export const BlogSection = forwardRef<HTMLElement, BlogSectionProps>(
       description,
       showAllLabel,
       showAllHref,
+      LinkComponent,
       ...props
     },
     ref,
   ) => {
     const visible = limit ? posts.slice(0, limit) : posts;
+    const Link = LinkComponent ?? "a";
 
     return (
       <section ref={ref} className={cn("w-full py-20 sm:py-24", className)} {...props}>
@@ -211,13 +219,13 @@ export const BlogSection = forwardRef<HTMLElement, BlogSectionProps>(
                 ) : null}
               </div>
               {showAllHref ? (
-                <a
+                <Link
                   href={showAllHref}
                   className="group inline-flex shrink-0 cursor-pointer items-center gap-1.5 text-sm font-semibold text-foreground transition-colors duration-150 hover:text-primary"
                 >
                   {showAllLabel ?? "All posts"}
                   <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
-                </a>
+                </Link>
               ) : null}
             </div>
           )}
@@ -225,13 +233,13 @@ export const BlogSection = forwardRef<HTMLElement, BlogSectionProps>(
           {option === "row" ? (
             <div className="divide-y divide-border border-t border-border">
               {visible.map((post) => (
-                <BlogCard key={post.title} post={post} option="row" />
+                <BlogCard key={post.title} post={post} option="row" LinkComponent={LinkComponent} />
               ))}
             </div>
           ) : (
             <div className={cn("grid grid-cols-1 gap-4", gridCols[columns])}>
               {visible.map((post) => (
-                <BlogCard key={post.title} post={post} option="card" />
+                <BlogCard key={post.title} post={post} option="card" LinkComponent={LinkComponent} />
               ))}
             </div>
           )}

package/src/components/Button.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
 import { cn } from "../utils/cn";
 import { getContrastText } from "../utils/contrast";
+import { Slot } from "./Slot";
 
 export type ButtonVariant = "primary" | "dark" | "outline" | "ghost" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
@@ -13,6 +14,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Paints the button with an arbitrary CSS color; text color is computed for contrast. */
   customColor?: string;
   fullWidth?: boolean;
+  /**
+   * When `true`, the button styling is applied to a single child element
+   * instead of a `<button>`. Use it to render a framework router `<Link>`
+   * (Next.js, Remix, React Router…). `iconLeft` / `iconRight` are ignored;
+   * pass icons inside the child instead.
+   */
+  asChild?: boolean;
 }
 
 const variants: Record<ButtonVariant, string> = {
@@ -43,6 +51,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       iconRight,
       customColor,
       fullWidth,
+      asChild,
       style,
       type = "button",
       children,
@@ -60,19 +69,29 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const isLink = variant === "link";
 
+    const classes = cn(
+      base,
+      sizes[size],
+      customColor ? "hover:brightness-95" : variants[variant],
+      isLink && "underline-offset-4 hover:underline",
+      fullWidth && "w-full",
+      className,
+    );
+
+    if (asChild) {
+      return (
+        <Slot ref={ref} style={customStyle} className={classes} {...props}>
+          {children}
+        </Slot>
+      );
+    }
+
     return (
       <button
         ref={ref}
         type={type}
         style={customStyle}
-        className={cn(
-          base,
-          sizes[size],
-          customColor ? "hover:brightness-95" : variants[variant],
-          isLink && "underline-offset-4 hover:underline",
-          fullWidth && "w-full",
-          className,
-        )}
+        className={classes}
         {...props}
       >
         {iconLeft ? <span className={cn("shrink-0", !isLink && "opacity-70")}>{iconLeft}</span> : null}

package/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type ElementType, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "../utils/cn";
 import { Container } from "./Container";
 
@@ -14,25 +14,54 @@ export interface FooterColumn {
 
 export interface FooterProps extends HTMLAttributes<HTMLElement> {
   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;
   description?: string;
   columns: FooterColumn[];
   socials?: ReactNode;
   bottom?: ReactNode;
+  /** Optional language switcher rendered in the footer's bottom bar. */
+  languageSwitcher?: ReactNode;
   option?: "classic" | "minimal" | "editorial";
   badge?: ReactNode;
+  /** Component used to render footer links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
 }
 
 export const Footer = ({
   className,
   brand,
+  logo,
+  logoSrc,
+  logoAlt,
+  logoClassName,
   description,
   columns,
   socials,
   bottom,
+  languageSwitcher,
   option = "classic",
   badge,
+  LinkComponent,
   ...props
 }: FooterProps) => {
+  const Link = LinkComponent ?? "a";
+
+  const logoNode = (imageClassName = "h-7 w-auto") =>
+    logo ??
+    (logoSrc ? (
+      <img
+        src={logoSrc}
+        alt={logoAlt ?? (typeof brand === "string" ? brand : "Logo")}
+        className={cn(imageClassName, logoClassName)}
+      />
+    ) : null);
+
   const brandNode = (
     <span className="flex items-center gap-2 font-display text-lg font-bold tracking-tight">
       <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-sm bg-current" />
@@ -40,21 +69,32 @@ export const Footer = ({
     </span>
   );
 
+  const classicBrand = logoNode() ?? brandNode;
+  const minimalBrand = logoNode() ?? brandNode;
+  const editorialBrand = logoNode("h-12 w-auto") ?? (
+    <span className="font-display text-5xl font-bold tracking-[-0.03em] text-foreground sm:text-7xl">
+      {brand}
+    </span>
+  );
+
   if (option === "minimal") {
     return (
       <footer className={cn("w-full border-t border-border bg-background", className)} {...props}>
         <Container className="flex flex-col items-center justify-between gap-6 py-10 sm:flex-row">
-          {brandNode}
+          {minimalBrand}
           <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
             {columns.flatMap((c) => c.links).slice(0, 6).map((link) => (
               <li key={link.href}>
-                <a href={link.href} className="text-sm text-muted-foreground transition-colors duration-150 hover:text-foreground">
+                <Link href={link.href} className="text-sm text-muted-foreground transition-colors duration-150 hover:text-foreground">
                   {link.label}
-                </a>
+                </Link>
               </li>
             ))}
           </ul>
-          <div className="text-sm text-muted-foreground">{bottom}</div>
+          <div className="flex flex-col items-center gap-3">
+            {languageSwitcher ? <div>{languageSwitcher}</div> : null}
+            <div className="text-sm text-muted-foreground">{bottom}</div>
+          </div>
         </Container>
       </footer>
     );
@@ -66,9 +106,7 @@ export const Footer = ({
         <Container className="py-16 sm:py-20">
           <div className="mb-14 flex flex-col justify-between gap-8 sm:flex-row sm:items-end">
             <div>
-              <span className="font-display text-5xl font-bold tracking-[-0.03em] text-foreground sm:text-7xl">
-                {brand}
-              </span>
+              {editorialBrand}
               {description ? (
                 <p className="mt-3 max-w-sm text-sm leading-6 text-muted-foreground">{description}</p>
               ) : null}
@@ -84,9 +122,9 @@ export const Footer = ({
                 <ul className="mt-4 space-y-2.5">
                   {column.links.map((link) => (
                     <li key={link.href}>
-                      <a href={link.href} className="text-[15px] text-foreground/80 transition-colors duration-150 hover:text-foreground">
+                      <Link href={link.href} className="text-[15px] text-foreground/80 transition-colors duration-150 hover:text-foreground">
                         {link.label}
-                      </a>
+                      </Link>
                     </li>
                   ))}
                 </ul>
@@ -95,6 +133,7 @@ export const Footer = ({
           </div>
           <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-sm text-muted-foreground sm:flex-row">
             <span>{bottom}</span>
+            {languageSwitcher ? <div>{languageSwitcher}</div> : null}
             <span>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
           </div>
         </Container>
@@ -107,7 +146,7 @@ export const Footer = ({
       <Container className="py-16">
         <div className="grid grid-cols-2 gap-10 md:grid-cols-4 lg:grid-cols-6">
           <div className="col-span-2">
-            <span style={{ color: "rgb(var(--color-on-secondary))" }}>{brandNode}</span>
+            <span style={{ color: "rgb(var(--color-on-secondary))" }}>{classicBrand}</span>
             {description ? (
               <p className="mt-4 max-w-xs text-sm leading-6 text-on-secondary/60">{description}</p>
             ) : null}
@@ -122,12 +161,12 @@ export const Footer = ({
               <ul className="mt-4 space-y-2.5">
                 {column.links.map((link) => (
                   <li key={link.href}>
-                    <a
+                    <Link
                       href={link.href}
                       className="text-sm text-on-secondary/70 transition-colors duration-150 hover:text-on-secondary"
                     >
                       {link.label}
-                    </a>
+                    </Link>
                   </li>
                 ))}
               </ul>
@@ -136,6 +175,7 @@ export const Footer = ({
         </div>
         <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 text-sm text-on-secondary/50 sm:flex-row">
           <span>{bottom}</span>
+          {languageSwitcher ? <div>{languageSwitcher}</div> : null}
           <span>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
         </div>
       </Container>

package/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,223 @@
+import { useEffect, useId, useRef, useState, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { iso2ToFlagEmoji } from "../utils/iso2Flag";
+import { Modal } from "./Modal";
+import { Check, ChevronDown, Globe } from "../icons";
+
+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 const LanguageSwitcher = ({
+  className,
+  languages,
+  option = "dropdown",
+  value,
+  defaultValue,
+  onChange,
+  align = "end",
+  modalTitle,
+  showFlag = false,
+  inverse = false,
+  ...props
+}: LanguageSwitcherProps) => {
+  const listboxId = useId();
+  const anchorName = `--ls-${listboxId.replace(/:/g, "")}`;
+  const rootRef = useRef<HTMLDivElement>(null);
+  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 select = (code: string) => {
+    setInternal(code);
+    setOpen(false);
+    onChange?.(code);
+  };
+
+  const 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)} />
+    );
+  };
+
+  useEffect(() => {
+    if (!open || option !== "dropdown") return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, option]);
+
+  if (languages.length === 0) return null;
+
+  const trigger = (
+    <button
+      type="button"
+      aria-haspopup={option === "dropdown" ? "listbox" : "dialog"}
+      aria-expanded={open}
+      aria-controls={option === "dropdown" ? listboxId : undefined}
+      onClick={() => setOpen((o) => !o)}
+      style={{ anchorName } as CSSProperties}
+      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>
+  );
+
+  if (option === "modal") {
+    return (
+      <>
+        <div ref={rootRef} className={cn("relative inline-flex", className)} {...props}>
+          {trigger}
+        </div>
+        <Modal open={open} onClose={() => setOpen(false)} title={modalTitle} size="sm">
+          <div role="listbox" aria-label="Select language" className="grid min-w-[19rem] gap-1.5">
+            {languages.map((lang) => {
+              const active = lang.code === current;
+              return (
+                <button
+                  key={lang.code}
+                  type="button"
+                  role="option"
+                  aria-selected={active}
+                  onClick={() => select(lang.code)}
+                  className={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",
+                  )}
+                >
+                  <span className="flex items-center gap-3">
+                    {showFlag ? renderFlagOrGlobe(lang.code, { size: "text-base" }) : null}
+                    <span className="text-sm font-medium">{lang.label}</span>
+                  </span>
+                  <span className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                    {lang.code}
+                    {active ? <Check className="h-4 w-4 text-primary" /> : null}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </Modal>
+      </>
+    );
+  }
+
+  return (
+    <div ref={rootRef} className={cn("relative inline-flex", className)} {...props}>
+      {trigger}
+
+      <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) => {
+          const active = lang.code === current;
+          return (
+            <button
+              key={lang.code}
+              type="button"
+              role="option"
+              aria-selected={active}
+              onClick={() => select(lang.code)}
+              className={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="flex items-center gap-2.5">
+                {showFlag ? renderFlagOrGlobe(lang.code) : null}
+                {lang.label}
+              </span>
+              {active ? <Check className="h-3.5 w-3.5 text-primary" /> : null}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+LanguageSwitcher.displayName = "LanguageSwitcher";