@ugurdemirel/landcraft 0.1.2 → 0.1.4

package/src/components/FAQ/types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type FAQOption = "accordion" | "split" | "cards";
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+export interface FAQProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  items: FaqItem[];
+  option?: FAQOption;
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+}

package/src/components/FAQ/variants/Accordion.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../../../utils/cn";
+import { useFaqState, FaqItemRow } from "../parts";
+import type { FAQProps } from "../types";
+
+interface AccordionProps extends FAQProps {
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+  bare?: boolean;
+}
+
+export const FaqAccordion = ({
+  className,
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  bare = false,
+  option,
+  title,
+  eyebrow,
+  description,
+  ...props
+}: AccordionProps) => {
+  const { isOpen, toggle } = useFaqState(allowMultiple, defaultOpen);
+
+  return (
+    <div
+      className={cn(
+        !bare && "divide-y divide-border rounded-2xl border border-border bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {items.map((item, index) => (
+        <FaqItemRow
+          key={item.question}
+          item={item}
+          open={isOpen(index)}
+          onToggle={() => toggle(index)}
+          style={bare ? "bare" : "boxed"}
+        />
+      ))}
+    </div>
+  );
+};
+FaqAccordion.displayName = "FaqAccordion";

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

@@ -0,0 +1,40 @@
+import { cn } from "../../../utils/cn";
+import { FaqEyebrow } from "../parts";
+import type { FAQProps } from "../types";
+
+interface CardsProps extends FAQProps {}
+
+export const FaqCards = ({
+  className,
+  items,
+  eyebrow,
+  title,
+  description,
+  option,
+  ...props
+}: CardsProps) => (
+  <div className={cn("w-full", className)} {...props}>
+    {eyebrow ? <div className="mb-10"><FaqEyebrow label={String(eyebrow)} /></div> : null}
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {items.map((item, i) => (
+        <div
+          key={item.question}
+          className="flex flex-col rounded-xl border border-border bg-surface p-7"
+        >
+          <div className="flex items-baseline gap-4">
+            <span className="font-display text-sm font-semibold tabular-nums text-foreground/35">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <h3 className="font-display text-lg font-semibold tracking-tight text-foreground">
+              {item.question}
+            </h3>
+          </div>
+          <p className="mt-4 border-t border-border pt-4 text-sm leading-6 text-muted-foreground">
+            {item.answer}
+          </p>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+FaqCards.displayName = "FaqCards";

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

@@ -0,0 +1,44 @@
+import { cn } from "../../../utils/cn";
+import { FaqEyebrow } from "../parts";
+import { FaqAccordion } from "./Accordion";
+import type { FAQProps } from "../types";
+
+interface SplitProps extends FAQProps {
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+}
+
+export const FaqSplit = ({
+  className,
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  eyebrow,
+  title,
+  description,
+  option,
+  ...props
+}: SplitProps) => (
+  <div className={cn("grid w-full gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:gap-20", className)} {...props}>
+    <div className="lg:sticky lg:top-24 lg:self-start">
+      {eyebrow ? <FaqEyebrow label={String(eyebrow)} /> : null}
+      {title ? (
+        <h2 className="mt-4 font-display text-3xl font-semibold leading-[1.08] tracking-tight text-foreground sm:text-4xl">
+          {title}
+        </h2>
+      ) : null}
+      {description ? (
+        <p className="mt-4 text-pretty text-base leading-7 text-muted-foreground">{description}</p>
+      ) : null}
+    </div>
+    <div className="divide-y divide-border">
+      <FaqAccordion
+        items={items}
+        allowMultiple={allowMultiple}
+        defaultOpen={defaultOpen}
+        bare
+      />
+    </div>
+  </div>
+);
+FaqSplit.displayName = "FaqSplit";

package/src/components/Features/FeatureCard.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+import { getContrastText } from "../../utils/contrast";
+import type { FeatureCardProps } from "./types";
+
+export const FeatureCard = forwardRef<HTMLDivElement, FeatureCardProps>(
+  ({ className, icon, title, description, accent, large = false, ...props }, ref) => {
+    const chipStyle = accent
+      ? { backgroundColor: accent, color: getContrastText(accent, "#111111", "#ffffff") }
+      : undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group relative flex h-full flex-col rounded-xl border border-border bg-surface p-7 transition-colors duration-200 hover:border-foreground/15",
+          className,
+        )}
+        {...props}
+      >
+        {icon ? (
+          <div
+            className={cn(
+              "mb-5 inline-flex h-10 w-10 items-center justify-center rounded-lg text-[1.05rem]",
+              !accent && "bg-primary-soft text-primary",
+            )}
+            style={chipStyle}
+          >
+            {icon}
+          </div>
+        ) : null}
+        <h3 className={cn("font-display font-semibold tracking-tight text-foreground", large ? "text-2xl" : "text-lg")}>
+          {title}
+        </h3>
+        {description ? (
+          <p className={cn("mt-2.5 text-pretty leading-relaxed text-muted-foreground", large ? "text-[15px]" : "text-sm")}>
+            {description}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+FeatureCard.displayName = "FeatureCard";

package/src/components/Features/FeatureGrid.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+import type { FeatureGridProps } from "./types";
+import { FeatureColumns } from "./variants/Columns";
+import { FeatureBento } from "./variants/Bento";
+import { FeatureEditorialRows } from "./variants/EditorialRows";
+
+export const FeatureGrid = forwardRef<HTMLDivElement, FeatureGridProps>(
+  ({ option = "columns", columns = 3, ...props }, ref) => {
+    if (option === "editorialRows") return <FeatureEditorialRows ref={ref} {...props} />;
+    if (option === "bento") return <FeatureBento ref={ref} {...props} />;
+    return <FeatureColumns ref={ref} columns={columns} {...props} />;
+  },
+);
+FeatureGrid.displayName = "FeatureGrid";

package/src/components/Features/index.ts

@@ -0,0 +1,3 @@
+export { FeatureCard } from "./FeatureCard";
+export { FeatureGrid } from "./FeatureGrid";
+export type { FeatureItem, FeatureCardProps, FeatureGridProps, FeatureGridOption } from "./types";

package/src/components/Features/parts.ts

@@ -0,0 +1,15 @@
+export const gridCols: Record<2 | 3 | 4, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+};
+
+/** Asymmetric bento layout for up to 6 features. */
+export const bentoSpans: string[] = [
+  "sm:col-span-2 lg:row-span-2",
+  "",
+  "",
+  "lg:col-span-2",
+  "",
+  "lg:col-span-2",
+];

package/src/components/Features/types.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type FeatureGridOption = "columns" | "bento" | "editorialRows";
+
+export interface FeatureItem {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  accent?: string;
+}
+
+export interface FeatureCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Arbitrary CSS color for the icon chip; glyph color computed for contrast. */
+  accent?: string;
+  large?: boolean;
+}
+
+export interface FeatureGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  features: FeatureItem[];
+  option?: FeatureGridOption;
+  columns?: 2 | 3 | 4;
+}

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

@@ -0,0 +1,32 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { FeatureCard } from "../FeatureCard";
+import { bentoSpans } from "../parts";
+import type { FeatureItem } from "../types";
+
+interface BentoProps extends HTMLAttributes<HTMLDivElement> {
+  features: FeatureItem[];
+}
+
+export const FeatureBento = forwardRef<HTMLDivElement, BentoProps>(
+  ({ className, features, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[minmax(9rem,auto)]",
+        "w-full",
+        className,
+      )}
+      {...props}
+    >
+      {features.map((feature, i) =>
+        feature ? (
+          <div key={i} className={cn(i < bentoSpans.length && bentoSpans[i])}>
+            <FeatureCard {...feature} large={i === 0} className="h-full" />
+          </div>
+        ) : null,
+      )}
+    </div>
+  ),
+);
+FeatureBento.displayName = "FeatureBento";

package/src/components/Features/variants/Columns.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import { FeatureCard } from "../FeatureCard";
+import { gridCols } from "../parts";
+import type { FeatureItem } from "../types";
+
+interface ColumnsProps extends HTMLAttributes<HTMLDivElement> {
+  features: FeatureItem[];
+  columns: 2 | 3 | 4;
+}
+
+export const FeatureColumns = forwardRef<HTMLDivElement, ColumnsProps>(
+  ({ className, features, columns, ...props }, ref) => (
+    <div ref={ref} className={cn("grid w-full grid-cols-1 gap-4", gridCols[columns], className)} {...props}>
+      {features.map((feature, i) => (
+        <FeatureCard key={i} {...feature} className="h-full" />
+      ))}
+    </div>
+  ),
+);
+FeatureColumns.displayName = "FeatureColumns";

package/src/components/Features/variants/EditorialRows.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../../utils/cn";
+import type { FeatureItem } from "../types";
+
+interface EditorialRowsProps extends HTMLAttributes<HTMLDivElement> {
+  features: FeatureItem[];
+}
+
+export const FeatureEditorialRows = forwardRef<HTMLDivElement, EditorialRowsProps>(
+  ({ className, features, ...props }, ref) => (
+    <div ref={ref} className={cn("w-full", className)} {...props}>
+      <div className="divide-y divide-border border-t border-b border-border">
+        {features.map((feature, i) => (
+          <div
+            key={i}
+            className="group flex flex-col gap-3 py-6 transition-colors duration-200 sm:flex-row sm:items-baseline sm:gap-10"
+          >
+            <span className="text-sm font-medium tabular-nums text-muted-foreground/60 sm:w-12">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <div className="flex-1 sm:flex sm:items-baseline sm:justify-between sm:gap-10">
+              <h3 className="font-display text-xl font-semibold tracking-tight text-foreground sm:w-2/5">
+                {feature.title}
+              </h3>
+              <p className="mt-1.5 text-sm leading-7 text-muted-foreground sm:mt-0 sm:w-1/2">
+                {feature.description}
+              </p>
+            </div>
+            {feature.icon ? (
+              <span className="hidden text-foreground/30 sm:inline-flex">{feature.icon}</span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+);
+FeatureEditorialRows.displayName = "FeatureEditorialRows";

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,11 @@
+import type { FooterProps } from "./types";
+import { FooterClassic } from "./variants/Classic";
+import { FooterMinimal } from "./variants/Minimal";
+import { FooterEditorial } from "./variants/Editorial";
+
+export const Footer = ({ option = "classic", ...props }: FooterProps) => {
+  if (option === "minimal") return <FooterMinimal {...props} />;
+  if (option === "editorial") return <FooterEditorial {...props} />;
+  return <FooterClassic {...props} />;
+};
+Footer.displayName = "Footer";

package/src/components/Footer/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from "./Footer";
+export type { FooterProps, FooterColumn, FooterLink } from "./types";

package/src/components/Footer/parts.tsx

@@ -0,0 +1,101 @@
+import type { ElementType, ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import type { FooterColumn } from "./types";
+
+export function FooterLogoNode({
+  logo,
+  logoSrc,
+  logoAlt,
+  logoClassName,
+  brand,
+  imageClassName = "h-7 w-auto",
+}: {
+  logo?: ReactNode;
+  logoSrc?: string;
+  logoAlt?: string;
+  logoClassName?: string;
+  brand?: ReactNode;
+  imageClassName?: string;
+}) {
+  if (logo) return logo;
+  if (logoSrc) {
+    return (
+      <img
+        src={logoSrc}
+        alt={logoAlt ?? (typeof brand === "string" ? brand : "Logo")}
+        className={cn(imageClassName, logoClassName)}
+      />
+    );
+  }
+  return null;
+}
+
+export function FooterWordmark({ brand }: { brand?: ReactNode }) {
+  return (
+    <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" />
+      {brand}
+    </span>
+  );
+}
+
+export function FooterEditorialWordmark({ brand }: { brand?: ReactNode }) {
+  return (
+    <span className="font-display text-5xl font-bold tracking-[-0.03em] text-foreground sm:text-7xl">
+      {brand}
+    </span>
+  );
+}
+
+export function FooterColumnsBlock({
+  columns,
+  Link,
+  linkClassName,
+}: {
+  columns: FooterColumn[];
+  Link: ElementType;
+  linkClassName: string;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
+      {columns.map((column) => (
+        <div key={column.title}>
+          <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            {column.title}
+          </h3>
+          <ul className="mt-4 space-y-2.5">
+            {column.links.map((link) => (
+              <li key={link.href}>
+                <Link href={link.href} className={linkClassName}>
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function FooterBottomBar({
+  bottom,
+  languageSwitcher,
+  brand,
+  wrapperClassName,
+  textClassName,
+}: {
+  bottom?: ReactNode;
+  languageSwitcher?: ReactNode;
+  brand?: ReactNode;
+  wrapperClassName: string;
+  textClassName: string;
+}) {
+  return (
+    <div className={wrapperClassName}>
+      <span className={cn(textClassName)}>{bottom}</span>
+      {languageSwitcher ? <div>{languageSwitcher}</div> : null}
+      <span className={cn(textClassName)}>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
+    </div>
+  );
+}

package/src/components/Footer/types.ts

@@ -0,0 +1,32 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+export interface FooterLink {
+  label: string;
+  href: string;
+}
+
+export interface FooterColumn {
+  title: string;
+  links: FooterLink[];
+}
+
+export interface FooterProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  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;
+}

package/src/components/Footer/variants/Classic.tsx

@@ -0,0 +1,59 @@
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import type { FooterProps } from "../types";
+import {
+  FooterWordmark,
+  FooterLogoNode,
+  FooterBottomBar,
+} from "../parts";
+
+interface ClassicProps extends FooterProps {}
+
+export function FooterClassic({ className, brand, logo, logoSrc, logoAlt, logoClassName, description, columns, socials, bottom, languageSwitcher, badge, LinkComponent, ...props }: ClassicProps) {
+  const Link = LinkComponent ?? "a";
+  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand }) ?? <FooterWordmark brand={brand} />;
+
+  return (
+    <footer className={cn("w-full bg-secondary text-on-secondary", className)} {...props}>
+      <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>
+            {description ? (
+              <p className="mt-4 max-w-xs text-sm leading-6 text-on-secondary/60">{description}</p>
+            ) : null}
+            {socials ? <div className="mt-6 flex items-center gap-3">{socials}</div> : null}
+            {badge ? <div className="mt-6">{badge}</div> : null}
+          </div>
+          {columns.map((column) => (
+            <div key={column.title}>
+              <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-on-secondary/50">
+                {column.title}
+              </h3>
+              <ul className="mt-4 space-y-2.5">
+                {column.links.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-on-secondary/70 transition-colors duration-150 hover:text-on-secondary"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <FooterBottomBar
+          bottom={bottom}
+          languageSwitcher={languageSwitcher}
+          brand={brand}
+          wrapperClassName="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"
+          textClassName=""
+        />
+      </Container>
+    </footer>
+  );
+}
+FooterClassic.displayName = "FooterClassic";

package/src/components/Footer/variants/Editorial.tsx

@@ -0,0 +1,47 @@
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import type { FooterProps } from "../types";
+import {
+  FooterColumnsBlock,
+  FooterEditorialWordmark,
+  FooterLogoNode,
+  FooterBottomBar,
+} from "../parts";
+
+interface EditorialProps extends FooterProps {}
+
+export function FooterEditorial({ className, brand, logo, logoSrc, logoAlt, logoClassName, description, columns, socials, bottom, languageSwitcher, LinkComponent, ...props }: EditorialProps) {
+  const Link = LinkComponent ?? "a";
+  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand, imageClassName: "h-12 w-auto" }) ?? <FooterEditorialWordmark brand={brand} />;
+
+  return (
+    <footer className={cn("w-full border-t border-border bg-background", className)} {...props}>
+      <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>
+            {brandNode}
+            {description ? (
+              <p className="mt-3 max-w-sm text-sm leading-6 text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+          {socials ? <div className="flex items-center gap-3">{socials}</div> : null}
+        </div>
+        <div className="border-t border-border pt-12">
+          <FooterColumnsBlock
+            columns={columns}
+            Link={Link}
+            linkClassName="text-[15px] text-foreground/80 transition-colors duration-150 hover:text-foreground"
+          />
+        </div>
+        <FooterBottomBar
+          bottom={bottom}
+          languageSwitcher={languageSwitcher}
+          brand={brand}
+          wrapperClassName="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"
+          textClassName=""
+        />
+      </Container>
+    </footer>
+  );
+}
+FooterEditorial.displayName = "FooterEditorial";

package/src/components/Footer/variants/Minimal.tsx

@@ -0,0 +1,33 @@
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import type { FooterProps } from "../types";
+import { FooterWordmark, FooterLogoNode } from "../parts";
+
+interface MinimalProps extends FooterProps {}
+
+export function FooterMinimal({ className, brand, logo, logoSrc, logoAlt, logoClassName, columns, languageSwitcher, bottom, LinkComponent, ...props }: MinimalProps) {
+  const Link = LinkComponent ?? "a";
+  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand }) ?? <FooterWordmark brand={brand} />;
+
+  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}
+        <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}>
+              <Link href={link.href} className="text-sm text-muted-foreground transition-colors duration-150 hover:text-foreground">
+                {link.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <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>
+  );
+}
+FooterMinimal.displayName = "FooterMinimal";

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import type { HeroProps } from "./types";
+import { HeroSplit } from "./variants/Split";
+import { HeroCentered } from "./variants/Centered";
+import { HeroStatement } from "./variants/Statement";
+
+export const Hero = forwardRef<HTMLElement, HeroProps>(({ variant = "split", ...props }, ref) => {
+  if (variant === "centered") return <HeroCentered ref={ref} {...props} />;
+  if (variant === "statement") return <HeroStatement ref={ref} {...props} />;
+  return <HeroSplit ref={ref} {...props} />;
+});
+Hero.displayName = "Hero";

package/src/components/Hero/index.ts

@@ -0,0 +1,2 @@
+export { Hero } from "./Hero";
+export type { HeroProps, HeroMeta, HeroVariant } from "./types";