@ugurdemirel/landcraft 0.1.0 → 0.1.2

package/src/components/MegaMenu.tsx

@@ -1,4 +1,4 @@
-import { useId, useState, type HTMLAttributes, type ReactNode } from "react";
+import { useId, useState, type ElementType, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "../utils/cn";
 import { getContrastText } from "../utils/contrast";
 import { ChevronDown, Menu, X } from "../icons";
@@ -50,6 +50,8 @@ export interface MegaMenuProps extends Omit<HTMLAttributes<HTMLElement>, "title"
   actions?: ReactNode;
   cta?: ReactNode;
   sticky?: boolean;
+  /** Component used to render brand, trigger and panel links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
 }
 
 const triggerStyles = {
@@ -71,10 +73,12 @@ export const MegaMenu = ({
   actions,
   cta,
   sticky = true,
+  LinkComponent,
   onKeyDown,
   ...props
 }: MegaMenuProps) => {
   const ids = useId();
+  const Link = LinkComponent ?? "a";
   const [openIndex, setOpenIndex] = useState<number | null>(null);
   const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileExpanded, setMobileExpanded] = useState<number | null>(null);
@@ -166,7 +170,7 @@ export const MegaMenu = ({
           <ul className={cn(column.title && "mt-3", "space-y-0.5")}>
             {column.links.map((link) => (
               <li key={link.href}>
-                <a
+                <Link
                   href={link.href}
                   onClick={closeAll}
                   className={cn(
@@ -189,7 +193,7 @@ export const MegaMenu = ({
                       {link.description}
                     </span>
                   ) : null}
-                </a>
+                </Link>
               </li>
             ))}
           </ul>
@@ -206,7 +210,7 @@ export const MegaMenu = ({
       : undefined;
 
     return (
-      <a
+      <Link
         href={featured.href}
         onClick={closeAll}
         className={cn(
@@ -237,7 +241,7 @@ export const MegaMenu = ({
           aria-hidden
           className="pointer-events-none absolute -right-8 -top-8 h-28 w-28 rounded-full opacity-20 blur-2xl bg-black/40"
         />
-      </a>
+      </Link>
     );
   };
 
@@ -255,9 +259,9 @@ export const MegaMenu = ({
       {...props}
     >
       <nav className={bar} onMouseLeave={closePanels} aria-label="Mega menu">
-        <a href={brandHref} className="shrink-0">
+        <Link href={brandHref} className="shrink-0">
           {brandNode}
-        </a>
+        </Link>
 
         <ul className="hidden items-center gap-1 lg:flex">
           {items.map((item, i) => {
@@ -304,14 +308,14 @@ export const MegaMenu = ({
                     />
                   </button>
                 ) : (
-                  <a href={item.href ?? "#"} className={triggerClasses}>
+                  <Link href={item.href ?? "#"} className={triggerClasses}>
                     {item.label}
                     {item.badge ? (
                       <span className="rounded-full bg-primary-soft px-1.5 py-0.5 text-[10px] font-semibold tracking-wide text-primary">
                         {item.badge}
                       </span>
                     ) : null}
-                  </a>
+                  </Link>
                 )}
               </li>
             );
@@ -439,7 +443,7 @@ export const MegaMenu = ({
                 </li>
               ) : (
                 <li key={item.label} className="px-5">
-                  <a
+                  <Link
                     href={item.href ?? "#"}
                     onClick={() => setMobileOpen(false)}
                     className={cn(
@@ -450,7 +454,7 @@ export const MegaMenu = ({
                     )}
                   >
                     {item.label}
-                  </a>
+                  </Link>
                 </li>
               ),
             )}

package/src/components/Modal.tsx

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

package/src/components/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useState, type HTMLAttributes, type ReactNode } from "react";
+import { useState, type ElementType, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "../utils/cn";
 import { Menu, X } from "../icons";
 
@@ -21,8 +21,12 @@ export interface NavbarProps extends Omit<HTMLAttributes<HTMLElement>, "title">
   brandHref?: string;
   links: NavLink[];
   actions?: ReactNode;
-  sticky?: boolean;
   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;
 }
 
 const linkStyles = {
@@ -43,11 +47,14 @@ export const Navbar = ({
   links,
   actions,
   cta,
+  languageSwitcher,
   sticky = true,
+  LinkComponent,
   ...props
 }: NavbarProps) => {
   const [open, setOpen] = useState(false);
   const inverse = variant === "inverse";
+  const Link = LinkComponent ?? "a";
 
   const shell = cn(
     "w-full transition-colors duration-200",
@@ -99,14 +106,14 @@ export const Navbar = ({
   return (
     <header className={cn(shell, variant === "floating" && "px-3 sm:px-6", className)} {...props}>
       <nav className={bar} aria-label="Main navigation">
-        <a href={brandHref} className="shrink-0">
+        <Link href={brandHref} className="shrink-0">
           {brandNode}
-        </a>
+        </Link>
 
         <ul className="hidden items-center gap-7 md:flex">
           {links.map((link) => (
             <li key={link.href}>
-              <a
+              <Link
                 href={link.href}
                 className={cn(
                   "text-sm font-medium transition-colors duration-150",
@@ -114,16 +121,21 @@ export const Navbar = ({
                 )}
               >
                 {link.label}
-              </a>
+              </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"}
@@ -155,7 +167,7 @@ export const Navbar = ({
           <ul className={cn("flex flex-col py-4", variant !== "floating" && "px-5")}>
             {links.map((link) => (
               <li key={link.href}>
-                <a
+                <Link
                   href={link.href}
                   onClick={() => setOpen(false)}
                   className={cn(
@@ -166,7 +178,7 @@ export const Navbar = ({
                   )}
                 >
                   {link.label}
-                </a>
+                </Link>
               </li>
             ))}
             {cta ? (

package/src/components/Slot.tsx

@@ -0,0 +1,78 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { cn } from "../utils/cn";
+
+export interface SlotProps extends Omit<HTMLAttributes<HTMLElement>, "ref"> {
+  children?: ReactNode;
+}
+
+type AnyProps = Record<string, any>;
+
+function mergeProps(slotProps: AnyProps, childProps: AnyProps): AnyProps {
+  const overrideProps: AnyProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: any[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = cn(slotPropValue, childPropValue);
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+function useComposedRefs(...refs: Array<Ref<unknown> | undefined>) {
+  return (node: unknown) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        (ref as { current: unknown }).current = node;
+      }
+    }
+  };
+}
+
+/**
+ * Merges its props onto a single child element instead of rendering its own
+ * DOM node. Used with the `asChild` prop so consumers can render a framework
+ * router `<Link>` (Next.js, Remix, React Router…) with a component's styling.
+ */
+export const Slot = forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+
+  if (!isValidElement(children)) {
+    return null;
+  }
+
+  const child = Children.only(children) as ReactElement & { ref?: Ref<unknown> };
+  const composedRef = useComposedRefs(forwardedRef, child.ref);
+
+  return cloneElement(child, {
+    ...mergeProps(slotProps as AnyProps, child.props as AnyProps),
+    ref: composedRef,
+  });
+});
+Slot.displayName = "Slot";

package/src/index.ts

@@ -1,4 +1,5 @@
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./components/Button";
+export { Slot, type SlotProps } from "./components/Slot";
 export { Badge, type BadgeProps, type BadgeVariant, type BadgeSize } from "./components/Badge";
 export {
   Card,
@@ -48,6 +49,13 @@ export {
 export { CTA, type CTAProps } from "./components/CTA";
 export { FAQ, type FAQProps, type FaqItem } from "./components/FAQ";
 export { Footer, type FooterProps, type FooterColumn, type FooterLink } from "./components/Footer";
+export {
+  LanguageSwitcher,
+  type LanguageSwitcherProps,
+  type LanguageSwitcherOption,
+  type LanguageOption,
+} from "./components/LanguageSwitcher";
+export { Modal, type ModalProps } from "./components/Modal";
 export { Newsletter, type NewsletterProps } from "./components/Newsletter";
 export { Prose, ProseLead, type ProseProps, type ProseSize } from "./components/Prose";
 export {
@@ -70,6 +78,7 @@ export {
 export { cn } from "./utils/cn";
 export { getContrastText, type ColorInput } from "./utils/contrast";
 export { useTokenForeground } from "./utils/useTokenForeground";
+export { iso2ToFlagEmoji } from "./utils/iso2Flag";
 
 export {
   ArrowRight,

package/src/styles/index.css

@@ -1,53 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "./theme.css";
 
 @layer base {
-  :root {
-    /* ── Brand ─────────────────────────────────────────────── */
-    --color-primary: 79 70 229;        /* indigo-600 */
-    --color-primary-hover: 67 56 202;  /* indigo-700 */
-    --color-primary-soft: 238 242 255; /* indigo-50 */
-    --color-on-primary: 255 255 255;
-
-    --color-secondary: 15 15 15;       /* ink */
-    --color-secondary-hover: 38 38 38;
-    --color-on-secondary: 250 250 250;
-
-    --color-accent: 5 150 105;         /* emerald-600 */
-    --color-accent-hover: 4 120 87;
-    --color-on-accent: 255 255 255;
-
-    /* ── Surfaces & text (warm paper, not pure white) ──────── */
-    --color-background: 250 250 250;
-    --color-foreground: 17 17 17;
-    --color-muted-foreground: 97 97 97;
-    --color-surface: 255 255 255;
-    --color-surface-strong: 244 244 242;
-    --color-border: 229 229 228;
-    --color-ring: 79 70 229;
-    --color-danger: 217 45 32;
-    --color-danger-soft: 255 241 242;
-
-    /* ── Type & shape ──────────────────────────────────────── */
-    --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-    --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-
-    --radius-sm: 0.375rem;
-    --radius-md: 0.625rem;
-    --radius-lg: 0.875rem;
-    --radius-xl: 1.125rem;
-    --radius-2xl: 1.5rem;
-    --radius-3xl: 2rem;
-
-    /* ── Elevation ─────────────────────────────────────────── */
-    --shadow-soft: 0 1px 2px rgb(17 17 17 / 0.04), 0 2px 8px rgb(17 17 17 / 0.04);
-    --shadow-raised: 0 2px 4px rgb(17 17 17 / 0.05), 0 12px 32px rgb(17 17 17 / 0.08);
-    --shadow-overlay: 0 24px 64px -12px rgb(17 17 17 / 0.18);
-  }
-
   html {
     -webkit-tap-highlight-color: transparent;
     scroll-behavior: smooth;
@@ -61,27 +16,3 @@
     background-color: rgb(var(--color-primary) / 0.18);
   }
 }
-
-@layer utilities {
-  /* Subtle film grain for dark/statement surfaces */
-  .grain {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
-  }
-
-  .animate-marquee {
-    animation: marquee 38s linear infinite;
-  }
-
-  .mask-fade-x {
-    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
-  }
-}
-
-@keyframes marquee {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}