@burdenoff/website-sdk 2026.520.2 → 2026.520.4

package/dist/components/contact.d.mts

@@ -36,6 +36,39 @@ interface ContactOption {
     buttonText: string;
     buttonLink: string;
 }
+/**
+ * One entry in the contact-form Category dropdown. Each product website
+ * supplies its own allow-list via the `categories` prop so the
+ * vocabulary stays product-appropriate (e.g. VibeControls uses
+ * `plugin-developer`, a manufacturing site uses `dealer`). The backend
+ * accepts whatever `value` string is sent and persists it directly.
+ *
+ * `value` flows to the backend; `label` is what the user sees.
+ */
+interface ContactCategory {
+    /** Stored on the server. Short, kebab-case is conventional. */
+    value: string;
+    /** Human-readable label shown in the dropdown. */
+    label: string;
+}
+/**
+ * Conservative starter category list — Burdenoff-generic vocabulary
+ * (General / Sales / Support / Partnership / Press / Careers / Security).
+ *
+ * **Not** applied by default: pass it explicitly to opt in:
+ *
+ * ```tsx
+ * <ContactPage
+ *   …
+ *   categories={DEFAULT_CONTACT_CATEGORIES}
+ * />
+ * ```
+ *
+ * The component default for `categories` is `[]` (no dropdown) so this
+ * SDK release is backward-compatible with existing consumers that
+ * don't yet know about the field — see the prop docs.
+ */
+declare const DEFAULT_CONTACT_CATEGORIES: ContactCategory[];
 interface ContactPageProps {
     /** Product name. Falls back to SDK config productId if not provided. */
     productName?: string;
@@ -55,6 +88,40 @@ interface ContactPageProps {
     heroDescription?: string;
     /** Additional contact options */
     additionalOptions?: ContactOption[];
+    /**
+     * Inquiry-type dropdown allow-list. **Defaults to `[]`** — the
+     * dropdown does not render unless the consumer explicitly opts in.
+     *
+     * Two ways to opt in:
+     *
+     * ```tsx
+     * // 1. Provide a product-specific list
+     * <ContactPage categories={[{ value: 'sales', label: 'Sales' }, …]} />
+     *
+     * // 2. Or use the conservative SDK starter list
+     * <ContactPage categories={DEFAULT_CONTACT_CATEGORIES} />
+     * ```
+     *
+     * Default is intentionally empty (not `DEFAULT_CONTACT_CATEGORIES`)
+     * to keep this SDK release backward-compatible with existing
+     * consumers that don't yet wire `categories` — they get zero
+     * behavior change.
+     *
+     * Typed `readonly` because the component never mutates the array;
+     * lets product sites pass an `as const`-frozen config without an
+     * extra `[...spread]` at the call site.
+     */
+    categories?: readonly ContactCategory[];
+    /** Label shown above the category dropdown. */
+    categoryLabel?: string;
+    /** Placeholder text for the unselected state of the dropdown. */
+    categoryPlaceholder?: string;
+    /**
+     * Whether selecting a category is required to submit. Defaults to
+     * `true` — the whole point of the dropdown is routing, so users
+     * self-triage instead of pushing that work onto support.
+     */
+    categoryRequired?: boolean;
     /** SEO metadata */
     seo?: {
         title?: string;
@@ -64,6 +131,6 @@ interface ContactPageProps {
         url?: string;
     };
 }
-declare function ContactPage({ productName, recaptchaSiteKey, contactEmail, contactPhone, officeAddress, responseTime, heroTitle, heroDescription, additionalOptions, seo, }: ContactPageProps): react_jsx_runtime.JSX.Element;
+declare function ContactPage({ productName, recaptchaSiteKey, contactEmail, contactPhone, officeAddress, responseTime, heroTitle, heroDescription, categories, categoryLabel, categoryPlaceholder, categoryRequired, additionalOptions, seo, }: ContactPageProps): react_jsx_runtime.JSX.Element;
 
-export { ContactPage, type ContactPageProps };
+export { type ContactCategory, ContactPage, type ContactPageProps, DEFAULT_CONTACT_CATEGORIES };

package/dist/components/contact.d.ts

@@ -36,6 +36,39 @@ interface ContactOption {
     buttonText: string;
     buttonLink: string;
 }
+/**
+ * One entry in the contact-form Category dropdown. Each product website
+ * supplies its own allow-list via the `categories` prop so the
+ * vocabulary stays product-appropriate (e.g. VibeControls uses
+ * `plugin-developer`, a manufacturing site uses `dealer`). The backend
+ * accepts whatever `value` string is sent and persists it directly.
+ *
+ * `value` flows to the backend; `label` is what the user sees.
+ */
+interface ContactCategory {
+    /** Stored on the server. Short, kebab-case is conventional. */
+    value: string;
+    /** Human-readable label shown in the dropdown. */
+    label: string;
+}
+/**
+ * Conservative starter category list — Burdenoff-generic vocabulary
+ * (General / Sales / Support / Partnership / Press / Careers / Security).
+ *
+ * **Not** applied by default: pass it explicitly to opt in:
+ *
+ * ```tsx
+ * <ContactPage
+ *   …
+ *   categories={DEFAULT_CONTACT_CATEGORIES}
+ * />
+ * ```
+ *
+ * The component default for `categories` is `[]` (no dropdown) so this
+ * SDK release is backward-compatible with existing consumers that
+ * don't yet know about the field — see the prop docs.
+ */
+declare const DEFAULT_CONTACT_CATEGORIES: ContactCategory[];
 interface ContactPageProps {
     /** Product name. Falls back to SDK config productId if not provided. */
     productName?: string;
@@ -55,6 +88,40 @@ interface ContactPageProps {
     heroDescription?: string;
     /** Additional contact options */
     additionalOptions?: ContactOption[];
+    /**
+     * Inquiry-type dropdown allow-list. **Defaults to `[]`** — the
+     * dropdown does not render unless the consumer explicitly opts in.
+     *
+     * Two ways to opt in:
+     *
+     * ```tsx
+     * // 1. Provide a product-specific list
+     * <ContactPage categories={[{ value: 'sales', label: 'Sales' }, …]} />
+     *
+     * // 2. Or use the conservative SDK starter list
+     * <ContactPage categories={DEFAULT_CONTACT_CATEGORIES} />
+     * ```
+     *
+     * Default is intentionally empty (not `DEFAULT_CONTACT_CATEGORIES`)
+     * to keep this SDK release backward-compatible with existing
+     * consumers that don't yet wire `categories` — they get zero
+     * behavior change.
+     *
+     * Typed `readonly` because the component never mutates the array;
+     * lets product sites pass an `as const`-frozen config without an
+     * extra `[...spread]` at the call site.
+     */
+    categories?: readonly ContactCategory[];
+    /** Label shown above the category dropdown. */
+    categoryLabel?: string;
+    /** Placeholder text for the unselected state of the dropdown. */
+    categoryPlaceholder?: string;
+    /**
+     * Whether selecting a category is required to submit. Defaults to
+     * `true` — the whole point of the dropdown is routing, so users
+     * self-triage instead of pushing that work onto support.
+     */
+    categoryRequired?: boolean;
     /** SEO metadata */
     seo?: {
         title?: string;
@@ -64,6 +131,6 @@ interface ContactPageProps {
         url?: string;
     };
 }
-declare function ContactPage({ productName, recaptchaSiteKey, contactEmail, contactPhone, officeAddress, responseTime, heroTitle, heroDescription, additionalOptions, seo, }: ContactPageProps): react_jsx_runtime.JSX.Element;
+declare function ContactPage({ productName, recaptchaSiteKey, contactEmail, contactPhone, officeAddress, responseTime, heroTitle, heroDescription, categories, categoryLabel, categoryPlaceholder, categoryRequired, additionalOptions, seo, }: ContactPageProps): react_jsx_runtime.JSX.Element;
 
-export { ContactPage, type ContactPageProps };
+export { type ContactCategory, ContactPage, type ContactPageProps, DEFAULT_CONTACT_CATEGORIES };

package/dist/components/contact.js

@@ -322,6 +322,28 @@ var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var Select = React__namespace.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      className: cn(
+        "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent bg-[length:1rem_1rem] bg-[right_0.75rem_center] bg-no-repeat px-3 py-1 pr-8 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        // Inline SVG chevron: SVG inside a `background-image: url(data:…)`
+        // does NOT inherit `currentColor` from the host element (the SVG is
+        // its own document with no parent CSS context), so the stroke is
+        // hardcoded to a muted slate-400 (#94a3b8). Matches the muted
+        // foreground token visually in both light and dark themes well
+        // enough for a passive chevron — addresses #9 review feedback.
+        `bg-[url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")]`,
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+Select.displayName = "Select";
 var Textarea = React__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
@@ -336,6 +358,15 @@ var Textarea = React__namespace.forwardRef(({ className, ...props }, ref) => {
   );
 });
 Textarea.displayName = "Textarea";
+var DEFAULT_CONTACT_CATEGORIES = [
+  { value: "general", label: "General enquiry" },
+  { value: "sales", label: "Sales" },
+  { value: "support", label: "Support" },
+  { value: "partnership", label: "Partnership" },
+  { value: "press", label: "Press / media" },
+  { value: "careers", label: "Careers" },
+  { value: "security", label: "Security disclosure" }
+];
 var SUBMIT_CONTACT_INQUIRY_MUTATION = (
   /* GraphQL */
   `
@@ -357,6 +388,12 @@ async function submitContactForm(client, data, productId) {
         subject: data.subject,
         message: data.message,
         productId,
+        // Send `category` only when the user actually picked one. Older
+        // backend deployments without the `category` field in the
+        // `SubmitContactInquiryInput` schema would reject any unknown
+        // field; spreading conditionally keeps the SDK forward-
+        // compatible.
+        ...data.category ? { category: data.category } : {},
         ...data.recaptchaToken ? { recaptchaToken: data.recaptchaToken } : {}
       }
     });
@@ -395,6 +432,16 @@ function ContactPage({
   responseTime = "We typically respond within 24 hours",
   heroTitle = "Get in Touch",
   heroDescription = "Have questions about {productName}? We're here to help. Reach out to our team and we'll get back to you as soon as possible.",
+  // Backward-compatibility: default to `[]` so existing consumers
+  // (fluidgrids/burdenoff/algoshred websites) that don't pass
+  // `categories` continue to render with NO dropdown — same behavior
+  // they had before this SDK version. To opt in, pass an explicit
+  // `categories={…}` array (or the exported `DEFAULT_CONTACT_CATEGORIES`
+  // constant for the sane Burdenoff-generic vocabulary).
+  categories = [],
+  categoryLabel = "Category",
+  categoryPlaceholder = "Select a category",
+  categoryRequired = true,
   additionalOptions = [
     {
       title: "Sales Inquiries",
@@ -438,11 +485,19 @@ function ContactPage({
     const form = e.currentTarget;
     try {
       const formData = new FormData(form);
+      const showCategory = categories.length > 0;
+      const rawCategory = showCategory ? (formData.get("category") ?? "").trim() : "";
+      if (showCategory && categoryRequired && !rawCategory) {
+        sonner.toast.error("Please select a category");
+        setIsSubmitting(false);
+        return;
+      }
       const contactData = {
         firstName: formData.get("firstName"),
         lastName: formData.get("lastName"),
         email: formData.get("email"),
         company: formData.get("company"),
+        category: rawCategory || void 0,
         subject: formData.get("subject"),
         message: formData.get("message"),
         recaptchaToken
@@ -611,6 +666,33 @@ function ContactPage({
                   }
                 )
               ] }),
+              categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Label,
+                  {
+                    htmlFor: "category",
+                    className: "text-sm sm:text-base",
+                    children: [
+                      categoryLabel,
+                      categoryRequired ? " *" : ""
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Select,
+                  {
+                    id: "category",
+                    name: "category",
+                    required: categoryRequired,
+                    defaultValue: "",
+                    className: "text-sm sm:text-base",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: categoryRequired, children: categoryPlaceholder }),
+                      categories.map((c) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: c.value, children: c.label }, c.value))
+                    ]
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "subject", className: "text-sm sm:text-base", children: "Subject *" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -712,5 +794,6 @@ function ContactPage({
 }
 
 exports.ContactPage = ContactPage;
+exports.DEFAULT_CONTACT_CATEGORIES = DEFAULT_CONTACT_CATEGORIES;
 //# sourceMappingURL=contact.js.map
 //# sourceMappingURL=contact.js.map