@shipsite.dev/components 0.2.55 → 0.2.60

package/src/marketing/FormClient.tsx

@@ -0,0 +1,194 @@
+"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 { Textarea } from "../ui/textarea";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { cn } from "../lib/utils";
+import { useFormSubmit } from "../lib/use-form-submit";
+
+const gridColsMap: Record<number, string> = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-2 lg:grid-cols-4",
+};
+
+const colSpanMap: Record<number, string> = {
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+};
+
+export interface FormFieldDef {
+  name: string;
+  label: string;
+  type?: "text" | "email" | "tel" | "url" | "textarea" | "select";
+  placeholder?: string;
+  required?: boolean;
+  options?: string[];
+  colSpan?: number;
+}
+
+interface FormClientProps {
+  id?: string;
+  action: string;
+  title?: string;
+  description?: string;
+  columns?: number;
+  submitLabel?: string;
+  successTitle?: string;
+  successMessage?: string;
+  fields: FormFieldDef[];
+}
+
+export function FormClient({
+  id,
+  action,
+  title,
+  description,
+  columns = 1,
+  submitLabel = "Submit",
+  successTitle = "Submitted!",
+  successMessage = "Thank you. We'll be in touch soon.",
+  fields,
+}: FormClientProps) {
+  const uid = useId();
+  const { status, errorMsg, submit } = useFormSubmit(action);
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const init: Record<string, string> = {};
+    for (const f of fields) init[f.name] = "";
+    return init;
+  });
+
+  function update(name: string, value: string) {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    submit(values);
+  }
+
+  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>
+        )}
+
+        {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">
+            <div
+              className={cn("grid grid-cols-1 gap-4", gridColsMap[columns])}
+            >
+              {fields.map((field) => (
+                <div
+                  key={field.name}
+                  className={cn("space-y-2", field.colSpan && colSpanMap[field.colSpan])}
+                >
+                  <Label htmlFor={`${uid}-${field.name}`}>{field.label}</Label>
+                  {field.type === "textarea" ? (
+                    <Textarea
+                      id={`${uid}-${field.name}`}
+                      name={field.name}
+                      placeholder={field.placeholder}
+                      required={field.required}
+                      value={values[field.name] ?? ""}
+                      onChange={(e) => update(field.name, e.target.value)}
+                      disabled={status === "loading"}
+                    />
+                  ) : field.type === "select" && field.options ? (
+                    <Select
+                      value={values[field.name] ?? ""}
+                      onValueChange={(v) => update(field.name, v)}
+                      required={field.required}
+                      disabled={status === "loading"}
+                    >
+                      <SelectTrigger id={`${uid}-${field.name}`}>
+                        <SelectValue
+                          placeholder={field.placeholder || "Select..."}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {field.options.map((opt) => (
+                          <SelectItem key={opt} value={opt}>
+                            {opt}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Input
+                      id={`${uid}-${field.name}`}
+                      name={field.name}
+                      type={field.type || "text"}
+                      placeholder={field.placeholder}
+                      required={field.required}
+                      value={values[field.name] ?? ""}
+                      onChange={(e) => update(field.name, e.target.value)}
+                      disabled={status === "loading"}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="mt-6">
+              <Button
+                type="submit"
+                variant="default"
+                size="lg"
+                className="w-full"
+                disabled={status === "loading"}
+              >
+                {status === "loading" ? (
+                  <>
+                    <Loader2 className="size-4 animate-spin mr-2" />
+                    Submitting...
+                  </>
+                ) : (
+                  submitLabel
+                )}
+              </Button>
+              {status === "error" && (
+                <p className="text-sm text-destructive mt-2" aria-live="polite">
+                  {errorMsg}
+                </p>
+              )}
+            </div>
+          </form>
+        )}
+      </div>
+    </Section>
+  );
+}

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 };