@ugurdemirel/landcraft 0.1.4 → 0.1.9

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -1,37 +0,0 @@
-"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

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

package/src/components/LanguageSwitcher/parts.tsx

@@ -1,144 +0,0 @@
-"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

@@ -1,40 +0,0 @@
-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

@@ -1,23 +0,0 @@
-"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

@@ -1,88 +0,0 @@
-"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

@@ -1,56 +0,0 @@
-"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";

package/src/components/LogoCloud/LogoCloud.tsx

@@ -1,14 +0,0 @@
-import { forwardRef } from "react";
-import type { LogoCloudProps } from "./types";
-import { LogoCloudQuiet } from "./variants/Quiet";
-import { LogoCloudMarquee } from "./variants/Marquee";
-import { LogoCloudStrip } from "./variants/Strip";
-
-export const LogoCloud = forwardRef<HTMLDivElement, LogoCloudProps>(
-  ({ option = "quiet", ...props }, ref) => {
-    if (option === "marquee") return <LogoCloudMarquee ref={ref} {...props} />;
-    if (option === "strip") return <LogoCloudStrip ref={ref} {...props} />;
-    return <LogoCloudQuiet ref={ref} {...props} />;
-  },
-);
-LogoCloud.displayName = "LogoCloud";

package/src/components/LogoCloud/index.ts

@@ -1,2 +0,0 @@
-export { LogoCloud } from "./LogoCloud";
-export type { LogoCloudProps, LogoCloudOption, LogoItem } from "./types";

package/src/components/LogoCloud/parts.tsx

@@ -1,32 +0,0 @@
-import { cn } from "../../utils/cn";
-import type { LogoItem } from "./types";
-
-const LogoText = ({ name }: { name: string }) => (
-  <span className="text-lg font-semibold tracking-tight text-foreground/45 transition-colors duration-200 group-hover:text-foreground">
-    {name}
-  </span>
-);
-
-export const LogoMark = ({ logo }: { logo: LogoItem }) =>
-  logo.src ? (
-    <img
-      src={logo.src}
-      alt={logo.name}
-      loading="lazy"
-      className={cn(
-        "max-h-7 w-auto opacity-50 grayscale transition-all duration-200 group-hover:opacity-90 group-hover:grayscale-0",
-        "h-7",
-      )}
-    />
-  ) : (
-    <LogoText name={logo.name} />
-  );
-
-export function LogoCloudTitle({ title, className }: { title?: string; className?: string }) {
-  if (!title) return null;
-  return (
-    <p className={cn("mb-8 text-center text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground", className)}>
-      {title}
-    </p>
-  );
-}

package/src/components/LogoCloud/types.ts

@@ -1,16 +0,0 @@
-import type { HTMLAttributes } from "react";
-
-export type LogoCloudOption = "quiet" | "marquee" | "strip";
-
-export interface LogoItem {
-  name: string;
-  src?: string;
-  href?: string;
-}
-
-export interface LogoCloudProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-  /** Visual option: quiet list · infinite marquee · hairline strip */
-  option?: LogoCloudOption;
-}

package/src/components/LogoCloud/variants/Marquee.tsx

@@ -1,30 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { LogoMark, LogoCloudTitle } from "../parts";
-import type { LogoItem } from "../types";
-
-interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-}
-
-export const LogoCloudMarquee = forwardRef<HTMLDivElement, MarqueeProps>(
-  ({ className, logos, title, ...props }, ref) => {
-    const doubled = [...logos, ...logos];
-    return (
-      <div ref={ref} className={cn("w-full overflow-hidden", className)} {...props}>
-        <LogoCloudTitle title={title} />
-        <div className="mask-fade-x">
-          <div className="flex w-max animate-marquee gap-14 pr-14 motion-reduce:animate-none">
-            {doubled.map((logo, i) => (
-              <div key={`${logo.name}-${i}`} className="group shrink-0">
-                <LogoMark logo={logo} />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-LogoCloudMarquee.displayName = "LogoCloudMarquee";

package/src/components/LogoCloud/variants/Quiet.tsx

@@ -1,26 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { LogoMark, LogoCloudTitle } from "../parts";
-import type { LogoItem } from "../types";
-
-interface QuietProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-}
-
-/** quiet — unbounded spread of wordmarks. */
-export const LogoCloudQuiet = forwardRef<HTMLDivElement, QuietProps>(
-  ({ className, logos, title, ...props }, ref) => (
-    <div ref={ref} className={cn("w-full", className)} {...props}>
-      <LogoCloudTitle title={title} />
-      <ul className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
-        {logos.map((logo) => (
-          <li key={logo.name} className="group">
-            <LogoMark logo={logo} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  ),
-);
-LogoCloudQuiet.displayName = "LogoCloudQuiet";

package/src/components/LogoCloud/variants/Strip.tsx

@@ -1,25 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { LogoMark, LogoCloudTitle } from "../parts";
-import type { LogoItem } from "../types";
-
-interface StripProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-}
-
-export const LogoCloudStrip = forwardRef<HTMLDivElement, StripProps>(
-  ({ className, logos, title, ...props }, ref) => (
-    <div ref={ref} className={cn("w-full", className)} {...props}>
-      <LogoCloudTitle title={title} />
-      <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 rounded-2xl border border-border bg-surface px-6 py-7 sm:gap-x-14">
-        {logos.map((logo) => (
-          <li key={logo.name} className="group">
-            <LogoMark logo={logo} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  ),
-);
-LogoCloudStrip.displayName = "LogoCloudStrip";