@opensite/ui 2.5.3 → 2.5.6

package/dist/contact-careers.cjs

@@ -1,20 +1,103 @@
 "use client";
 'use strict';
 
+var React4 = require('react');
 var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/contact/contact-careers.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
+function DynamicIcon({ apiKey, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+}
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
 function Card({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -28,6 +111,39 @@ function Card({ className, ...props }) {
     }
   );
 }
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -47,7 +163,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -353,7 +469,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -414,6 +530,38 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React4__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React4__namespace.isValidElement(reactNode)) {
+          return React4__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 var DEFAULT_STYLE_RULES = {
   formContainer: "",
   fieldsContainer: "",
@@ -439,7 +587,7 @@ var DEFAULT_FORM_FIELDS = [
     ]
   },
   {
-    name: "firstName",
+    name: "first_name",
     type: "text",
     label: "First Name",
     placeholder: "John",
@@ -447,7 +595,7 @@ var DEFAULT_FORM_FIELDS = [
     columnSpan: 6
   },
   {
-    name: "lastName",
+    name: "last_name",
     type: "text",
     label: "Last Name",
     placeholder: "Doe",
@@ -530,11 +678,101 @@ function ContactCareers({
   cardClassName,
   cardContentClassName,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
-  formEngineSetup
+  formEngineSetup,
+  jobListings,
+  sidebarComponent,
+  sidebarTitle = "Open Positions",
+  sidebarDescription,
+  sidebarClassName,
+  sidebarStickyClassName,
+  accordionClassName,
+  accordionItemClassName,
+  accordionTriggerClassName,
+  accordionContentClassName,
+  formCardTitle,
+  formCardDescription
 }) {
+  const jobListingsContent = React4.useMemo(() => {
+    if (sidebarComponent) return sidebarComponent;
+    if (!jobListings || jobListings.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Accordion,
+      {
+        type: "single",
+        collapsible: true,
+        className: cn("space-y-3", accordionClassName),
+        children: jobListings.map((job) => /* @__PURE__ */ jsxRuntime.jsxs(
+          AccordionItem,
+          {
+            value: job.id,
+            className: cn(
+              "rounded-xl border border-border/60 px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
+              accordionItemClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AccordionTrigger,
+                {
+                  className: cn(
+                    "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
+                    accordionTriggerClassName
+                  ),
+                  children: job.title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("pb-4", accordionContentClassName), children: job.description })
+            ]
+          },
+          job.id
+        ))
+      }
+    );
+  }, [
+    sidebarComponent,
+    jobListings,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
+  const contentItems = React4.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h1",
+          className: cn(
+            "text-4xl font-bold tracking-tight md:text-6xl text-balance",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-2xl text-lg md:text-xl text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
+  const hasSidebar = sidebarComponent || jobListings && jobListings.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -542,39 +780,42 @@ function ContactCareers({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h2",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-10", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(ContentGroup, { className: "space-y-3", items: contentItems }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8", hasSidebar && "lg:grid-cols-5"), children: [
+          hasSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
               className: cn(
-                "mb-3 text-3xl font-bold tracking-tight text-balance",
-                headingClassName
+                "order-first lg:order-last lg:col-span-2",
+                sidebarClassName
               ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "leading-relaxed text-balance",
-                descriptionClassName
-              ),
-              children: description
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:sticky lg:top-8", sidebarStickyClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl p-6", children: [
+                (sidebarTitle || sidebarDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+                  sidebarTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: sidebarTitle }),
+                  sidebarDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm ", children: sidebarDescription })
+                ] }),
+                jobListingsContent
+              ] }) })
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-0", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
-          integration.FormEngine,
-          {
-            formEngineSetup,
-            defaultFields: DEFAULT_FORM_FIELDS,
-            defaultStyleRules: DEFAULT_STYLE_RULES
-          }
-        ) : null }) })
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(hasSidebar && "lg:col-span-3"), children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClassName, children: [
+            (formCardTitle || formCardDescription) && /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+              formCardTitle && /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: formCardTitle }),
+              formCardDescription && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formCardDescription })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
+              integration.FormEngine,
+              {
+                formEngineSetup,
+                defaultFields: DEFAULT_FORM_FIELDS,
+                defaultStyleRules: DEFAULT_STYLE_RULES
+              }
+            ) : null })
+          ] }) })
+        ] })
       ] })
     }
   );

package/dist/contact-careers.d.cts

@@ -1,13 +1,30 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-rrR20a35.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B658AD6n.cjs';
 import 'react/jsx-runtime';
-import './blocks-C1EhIN1e.cjs';
+import './blocks-DUr75v0S.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
+/**
+ * A job listing item for the sidebar accordion
+ */
+interface JobListingItem {
+    /**
+     * Unique identifier for the job listing
+     */
+    id: string;
+    /**
+     * Job title (displayed as accordion trigger)
+     */
+    title: React.ReactNode;
+    /**
+     * Job description/details (displayed in accordion content)
+     */
+    description: React.ReactNode;
+}
 interface ContactCareersProps {
     /**
      * Main heading content
@@ -67,10 +84,63 @@ interface ContactCareersProps {
      * Full form engine setup and props
      */
     formEngineSetup?: FormEngineProps;
+    /**
+     * Array of job listings to display in the sidebar accordion.
+     * Each item will render as an expandable card showing job details.
+     */
+    jobListings?: JobListingItem[];
+    /**
+     * Custom sidebar component that replaces the default job listings accordion.
+     * Use this for fully custom sidebar content.
+     */
+    sidebarComponent?: React.ReactNode;
+    /**
+     * Title for the sidebar section
+     * @default "Open Positions"
+     */
+    sidebarTitle?: string;
+    /**
+     * Description for the sidebar section
+     */
+    sidebarDescription?: string;
+    /**
+     * Additional CSS classes for the sidebar wrapper
+     */
+    sidebarClassName?: string;
+    /**
+     * Additional CSS classes for the sticky container inside the sidebar
+     */
+    sidebarStickyClassName?: string;
+    /**
+     * Additional CSS classes for the accordion
+     */
+    accordionClassName?: string;
+    /**
+     * Additional CSS classes for accordion items
+     */
+    accordionItemClassName?: string;
+    /**
+     * Additional CSS classes for accordion triggers
+     */
+    accordionTriggerClassName?: string;
+    /**
+     * Additional CSS classes for accordion content
+     */
+    accordionContentClassName?: string;
+    /**
+     * Title for the form card
+     */
+    formCardTitle?: string;
+    /**
+     * Description for the form card
+     */
+    formCardDescription?: string;
 }
 /**
  * ContactCareers - A comprehensive job application form with position selection,
- * resume upload, and availability options. Perfect for career pages and job applications.
+ * resume upload, and availability options. Features a sticky sidebar that can display
+ * expandable job listings or custom content, allowing applicants to reference job
+ * details while completing their application.
  *
  * @example
  * ```tsx
@@ -78,9 +148,13 @@ interface ContactCareersProps {
  *   heading="Join Our Team"
  *   description="We're always looking for talented people to join us."
  *   formEngineSetup={{ formConfig: { endpoint: "/api/careers", format: "json" } }}
+ *   jobListings={[
+ *     { id: "1", title: "Frontend Developer", description: "Build amazing UIs..." },
+ *     { id: "2", title: "Backend Developer", description: "Design robust APIs..." },
+ *   ]}
  * />
  * ```
  */
-declare function ContactCareers({ heading, description, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, formEngineSetup, }: ContactCareersProps): React.JSX.Element;
+declare function ContactCareers({ heading, description, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, formEngineSetup, jobListings, sidebarComponent, sidebarTitle, sidebarDescription, sidebarClassName, sidebarStickyClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, formCardTitle, formCardDescription, }: ContactCareersProps): React.JSX.Element;
 
 export { ContactCareers, type ContactCareersProps };

package/dist/contact-careers.d.ts

@@ -1,13 +1,30 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DQN-ONWI.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BphRfrhZ.js';
 import 'react/jsx-runtime';
-import './blocks-Y0T7PIol.js';
+import './blocks-BzFuQGP0.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
+/**
+ * A job listing item for the sidebar accordion
+ */
+interface JobListingItem {
+    /**
+     * Unique identifier for the job listing
+     */
+    id: string;
+    /**
+     * Job title (displayed as accordion trigger)
+     */
+    title: React.ReactNode;
+    /**
+     * Job description/details (displayed in accordion content)
+     */
+    description: React.ReactNode;
+}
 interface ContactCareersProps {
     /**
      * Main heading content
@@ -67,10 +84,63 @@ interface ContactCareersProps {
      * Full form engine setup and props
      */
     formEngineSetup?: FormEngineProps;
+    /**
+     * Array of job listings to display in the sidebar accordion.
+     * Each item will render as an expandable card showing job details.
+     */
+    jobListings?: JobListingItem[];
+    /**
+     * Custom sidebar component that replaces the default job listings accordion.
+     * Use this for fully custom sidebar content.
+     */
+    sidebarComponent?: React.ReactNode;
+    /**
+     * Title for the sidebar section
+     * @default "Open Positions"
+     */
+    sidebarTitle?: string;
+    /**
+     * Description for the sidebar section
+     */
+    sidebarDescription?: string;
+    /**
+     * Additional CSS classes for the sidebar wrapper
+     */
+    sidebarClassName?: string;
+    /**
+     * Additional CSS classes for the sticky container inside the sidebar
+     */
+    sidebarStickyClassName?: string;
+    /**
+     * Additional CSS classes for the accordion
+     */
+    accordionClassName?: string;
+    /**
+     * Additional CSS classes for accordion items
+     */
+    accordionItemClassName?: string;
+    /**
+     * Additional CSS classes for accordion triggers
+     */
+    accordionTriggerClassName?: string;
+    /**
+     * Additional CSS classes for accordion content
+     */
+    accordionContentClassName?: string;
+    /**
+     * Title for the form card
+     */
+    formCardTitle?: string;
+    /**
+     * Description for the form card
+     */
+    formCardDescription?: string;
 }
 /**
  * ContactCareers - A comprehensive job application form with position selection,
- * resume upload, and availability options. Perfect for career pages and job applications.
+ * resume upload, and availability options. Features a sticky sidebar that can display
+ * expandable job listings or custom content, allowing applicants to reference job
+ * details while completing their application.
  *
  * @example
  * ```tsx
@@ -78,9 +148,13 @@ interface ContactCareersProps {
  *   heading="Join Our Team"
  *   description="We're always looking for talented people to join us."
  *   formEngineSetup={{ formConfig: { endpoint: "/api/careers", format: "json" } }}
+ *   jobListings={[
+ *     { id: "1", title: "Frontend Developer", description: "Build amazing UIs..." },
+ *     { id: "2", title: "Backend Developer", description: "Design robust APIs..." },
+ *   ]}
  * />
  * ```
  */
-declare function ContactCareers({ heading, description, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, formEngineSetup, }: ContactCareersProps): React.JSX.Element;
+declare function ContactCareers({ heading, description, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, formEngineSetup, jobListings, sidebarComponent, sidebarTitle, sidebarDescription, sidebarClassName, sidebarStickyClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, formCardTitle, formCardDescription, }: ContactCareersProps): React.JSX.Element;
 
 export { ContactCareers, type ContactCareersProps };