@shipsite.dev/components 0.2.53 → 0.2.60

package/src/marketing/FormEmbed.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { Section } from "../ui/section";
+import { Button } from "../ui/button";
+
+function resolveUrl(src: string, provider: "tally" | "typeform" | "custom"): string {
+  switch (provider) {
+    case "tally":
+      return `https://tally.so/embed/${src}?transparentBackground=1`;
+    case "typeform":
+      return `https://form.typeform.com/to/${src}`;
+    case "custom":
+      return src;
+  }
+}
+
+interface FormEmbedProps {
+  id?: string;
+  src: string;
+  provider?: "tally" | "typeform" | "custom";
+  title?: string;
+  description?: string;
+  height?: number;
+  mode?: "iframe" | "popup";
+  buttonLabel?: string;
+}
+
+export function FormEmbed({
+  id,
+  src,
+  provider = "custom",
+  title,
+  description,
+  height = 500,
+  mode = "iframe",
+  buttonLabel = "Open Form",
+}: FormEmbedProps) {
+  const resolvedUrl = resolveUrl(src, provider);
+
+  if (mode === "popup") {
+    return <FormEmbedPopup url={resolvedUrl} buttonLabel={buttonLabel} height={height} />;
+  }
+
+  return (
+    <Section id={id}>
+      <div className="container-main max-w-3xl">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+        <div className="glass-1 rounded-2xl overflow-hidden">
+          <iframe
+            src={resolvedUrl}
+            height={height}
+            className="w-full border-0"
+            loading="lazy"
+            title={title || "Embedded form"}
+          />
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+function FormEmbedPopup({
+  url,
+  buttonLabel,
+  height,
+}: {
+  url: string;
+  buttonLabel: string;
+  height: number;
+}) {
+  return (
+    <DialogPrimitive.Root>
+      <DialogPrimitive.Trigger asChild>
+        <Button variant="default" size="lg">
+          {buttonLabel}
+        </Button>
+      </DialogPrimitive.Trigger>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80" />
+        <DialogPrimitive.Content className="bg-background border-border dark:border-border/15 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 rounded-2xl border p-0 shadow-lg overflow-hidden">
+          <DialogPrimitive.Title className="sr-only">
+            {buttonLabel}
+          </DialogPrimitive.Title>
+          <DialogPrimitive.Description className="sr-only">
+            Embedded form
+          </DialogPrimitive.Description>
+          <iframe
+            src={url}
+            height={height}
+            className="w-full border-0"
+            loading="lazy"
+            title={buttonLabel}
+          />
+          <DialogPrimitive.Close className="ring-offset-background focus:ring-ring absolute top-4 right-4 z-[100] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden">
+            <XIcon className="size-5" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

package/src/marketing/NewsletterForm.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { FormEvent, useState } from "react";
+import { CheckCircle, Loader2 } from "lucide-react";
+import { Section } from "../ui/section";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { useFormSubmit } from "../lib/use-form-submit";
+
+interface NewsletterFormProps {
+  id?: string;
+  action: string;
+  title?: string;
+  description?: string;
+  placeholder?: string;
+  submitLabel?: string;
+  successMessage?: string;
+  variant?: "section" | "inline";
+}
+
+export function NewsletterForm({
+  id,
+  action,
+  title,
+  description,
+  placeholder = "Enter your email",
+  submitLabel = "Subscribe",
+  successMessage = "You're subscribed!",
+  variant = "section",
+}: NewsletterFormProps) {
+  const { status, errorMsg, submit } = useFormSubmit(action);
+  const [email, setEmail] = useState("");
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    submit({ email });
+  }
+
+  const successContent = (
+    <div className="flex items-center justify-center gap-2 text-sm text-primary">
+      <CheckCircle className="size-4" />
+      <span>{successMessage}</span>
+    </div>
+  );
+
+  const formContent =
+    status === "success" ? (
+      successContent
+    ) : (
+      <>
+        <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
+          <Input
+            type="email"
+            placeholder={placeholder}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="flex-1"
+            disabled={status === "loading"}
+          />
+          <Button type="submit" variant="default" disabled={status === "loading"}>
+            {status === "loading" ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              submitLabel
+            )}
+          </Button>
+        </form>
+        {status === "error" && (
+          <p className="text-sm text-destructive text-center mt-2" aria-live="polite">
+            {errorMsg}
+          </p>
+        )}
+      </>
+    );
+
+  if (variant === "inline") {
+    return formContent;
+  }
+
+  return (
+    <Section id={id}>
+      <div className="container-main max-w-2xl">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+        {formContent}
+      </div>
+    </Section>
+  );
+}

package/src/marketing/WaitlistForm.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React, { FormEvent, useId, useState } from "react";
+import { CheckCircle, Loader2 } from "lucide-react";
+import { Section } from "../ui/section";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { useFormSubmit } from "../lib/use-form-submit";
+
+interface WaitlistFormProps {
+  id?: string;
+  action: string;
+  title?: string;
+  description?: string;
+  badge?: string;
+  showName?: boolean;
+  nameLabel?: string;
+  emailLabel?: string;
+  submitLabel?: string;
+  successTitle?: string;
+  successMessage?: string;
+}
+
+export function WaitlistForm({
+  id,
+  action,
+  title = "Join the Waitlist",
+  description,
+  badge,
+  showName = false,
+  nameLabel = "Name",
+  emailLabel = "Email",
+  submitLabel = "Join Waitlist",
+  successTitle = "You're on the list!",
+  successMessage = "We'll notify you when it's your turn.",
+}: WaitlistFormProps) {
+  const uid = useId();
+  const { status, errorMsg, submit } = useFormSubmit(action);
+  const [fields, setFields] = useState({ name: "", email: "" });
+
+  function update(key: string, value: string) {
+    setFields((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    const data: Record<string, string> = { email: fields.email };
+    if (showName) data.name = fields.name;
+    submit(data);
+  }
+
+  return (
+    <Section id={id}>
+      <div className="container-main max-w-2xl text-center">
+        {badge && (
+          <div className="mb-4">
+            <Badge variant="outline">{badge}</Badge>
+          </div>
+        )}
+        {(title || description) && (
+          <div className="mb-12">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+
+        {status === "success" ? (
+          <div className="text-center py-12">
+            <div className="w-16 h-16 rounded-full bg-primary/10 mx-auto mb-4 flex items-center justify-center">
+              <CheckCircle className="w-8 h-8 text-primary" />
+            </div>
+            <h3 className="text-xl font-semibold text-foreground mb-2">
+              {successTitle}
+            </h3>
+            <p className="text-muted-foreground">{successMessage}</p>
+          </div>
+        ) : (
+          <form
+            onSubmit={handleSubmit}
+            className="glass-1 rounded-2xl p-8 max-w-md mx-auto space-y-4"
+          >
+            {showName && (
+              <div className="space-y-2 text-left">
+                <Label htmlFor={`${uid}-name`}>{nameLabel}</Label>
+                <Input
+                  id={`${uid}-name`}
+                  name="name"
+                  placeholder="Your name"
+                  value={fields.name}
+                  onChange={(e) => update("name", e.target.value)}
+                  required
+                  disabled={status === "loading"}
+                />
+              </div>
+            )}
+            <div className="space-y-2 text-left">
+              <Label htmlFor={`${uid}-email`}>{emailLabel}</Label>
+              <Input
+                id={`${uid}-email`}
+                name="email"
+                type="email"
+                placeholder="you@example.com"
+                value={fields.email}
+                onChange={(e) => update("email", e.target.value)}
+                required
+                disabled={status === "loading"}
+              />
+            </div>
+            <Button
+              type="submit"
+              variant="default"
+              size="lg"
+              className="w-full"
+              disabled={status === "loading"}
+            >
+              {status === "loading" ? (
+                <>
+                  <Loader2 className="size-4 animate-spin mr-2" />
+                  Joining...
+                </>
+              ) : (
+                submitLabel
+              )}
+            </Button>
+            {status === "error" && (
+              <p className="text-sm text-destructive" aria-live="polite">
+                {errorMsg}
+              </p>
+            )}
+          </form>
+        )}
+      </div>
+    </Section>
+  );
+}

package/src/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+function Input({ className, type, ...props }: InputProps) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/src/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative z-10 flex max-w-max flex-1 items-center justify-center",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-foreground/5 hover:text-accent-foreground focus:bg-foreground/10 focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-foreground/10 data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-foreground/10 data-[state=open]:bg-foreground/5 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-foreground/10 data-[active=true]:hover:bg-foreground/10 data-[active=true]:bg-foreground/10 data-[active=true]:text-accent-foreground hover:bg-foreground/10 hover:text-accent-foreground focus:bg-foreground/10 focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center",
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 border-border dark:border-border/15 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-sm md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuViewport,
+};