@opensite/ui 1.7.5 → 1.7.8

package/dist/contact-faq.css

@@ -105,7 +105,7 @@
   transition-duration: 150ms;
 }
 .select-trigger:hover {
-  background-color: var(--accent);
+  background-color: transparent;
 }
 .select-trigger:focus-visible {
   outline: none;
@@ -269,6 +269,172 @@
   color: rgb(239 68 68);
   margin-top: 0.5rem;
 }
+.radio-group {
+  width: 100%;
+}
+.radio-group-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  margin-bottom: 0.75rem;
+  color: var(--foreground);
+}
+.radio-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.radio-group--inline .radio-options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.radio-option {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 150ms;
+  background-color: var(--background);
+}
+.radio-option:hover {
+  border-color: var(--ring);
+  background-color: var(--accent);
+}
+.radio-option:has(.radio-input:checked) {
+  border-color: var(--primary);
+  background-color: var(--accent);
+}
+.radio-option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.radio-group--inline .radio-option {
+  flex: 1;
+  min-width: fit-content;
+}
+.radio-input {
+  appearance: none;
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  border: 2px solid var(--input);
+  background-color: var(--background);
+  cursor: pointer;
+  transition: all 150ms;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+.radio-input:hover {
+  border-color: var(--primary);
+}
+.radio-input:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  box-shadow: inset 0 0 0 3px var(--background);
+}
+.radio-input:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+.radio-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.radio-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+.radio-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--foreground);
+}
+.radio-description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--muted-foreground);
+}
+.radio-group--error .radio-option {
+  border-color: rgb(239 68 68);
+}
+.checkbox-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+.checkbox {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+  border: 2px solid var(--input);
+  background-color: var(--background);
+  cursor: pointer;
+  transition: all 150ms;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.checkbox:hover {
+  border-color: var(--primary);
+}
+.checkbox:checked {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+.checkbox:checked::after {
+  content: "";
+  position: absolute;
+  width: 0.375rem;
+  height: 0.75rem;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  top: 0.125rem;
+}
+.checkbox:indeterminate {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+.checkbox:indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 0.625rem;
+  height: 0.125rem;
+  background-color: white;
+  border-radius: 0.125rem;
+}
+.checkbox:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+.checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.checkbox--error {
+  border-color: rgb(239 68 68);
+}
+.checkbox-label-text {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--foreground);
+}
 @media (min-width: 768px) {
   .text-input,
   .textarea,

package/dist/contact-faq.d.cts

@@ -1,18 +1,14 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.cjs';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.cjs';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-8fmUivQe.cjs';
+import { F as FormFieldConfig } from './form-field-types-1zE7Be71.cjs';
+import { A as ActionConfig } from './blocks-CBlMqazU.cjs';
+import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
-interface ContactFaqFormValues {
-    name: string;
-    email: string;
-    subject: string;
-    message: string;
-}
 interface FaqItem {
     id: string;
     question: React.ReactNode;
@@ -59,6 +55,16 @@ interface ContactFaqProps {
      * Heading for the FAQ section
      */
     faqHeading?: React.ReactNode;
+    /**
+     * Array of form field configurations
+     * If not provided, defaults to: name, email, subject, message
+     */
+    formFields?: FormFieldConfig[];
+    /**
+     * Success message to display after form submission
+     * @default "Thank you! Your message has been sent successfully."
+     */
+    successMessage?: React.ReactNode;
     /**
      * Additional CSS classes for the section
      */
@@ -127,6 +133,14 @@ interface ContactFaqProps {
      * Additional CSS classes for the two-column grid wrapper
      */
     gridClassName?: string;
+    /**
+     * Additional CSS classes for the success message
+     */
+    successMessageClassName?: string;
+    /**
+     * Additional CSS classes for the error message
+     */
+    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
@@ -150,7 +164,7 @@ interface ContactFaqProps {
     /**
      * Custom submit handler
      */
-    onSubmit?: (values: ContactFaqFormValues) => void | Promise<void>;
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
     /**
      * Success callback
      */
@@ -161,16 +175,8 @@ interface ContactFaqProps {
     onError?: (error: Error) => void;
 }
 /**
- * ContactFaq - FAQ contact form for questions not answered in FAQ section.
- *
- * @example
- * ```tsx
- * <ContactFaq
- *   heading="Still need help?"
- *   formConfig={{ endpoint: "/api/contact", format: "json" }}
- * />
- * ```
+ * ContactFaq - FAQ contact form with flexible field configuration
  */
-declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, actions, actionsSlot, items, itemsSlot, faqHeading, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, formClassName, submitClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactFaqProps): React.JSX.Element;
+declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, actions, actionsSlot, items, itemsSlot, faqHeading, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, formClassName, submitClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactFaqProps): React.JSX.Element;
 
 export { ContactFaq, type ContactFaqProps, type FaqItem };

package/dist/contact-faq.d.ts

@@ -1,18 +1,14 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.js';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.js';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-CQv-6Tit.js';
+import { F as FormFieldConfig } from './form-field-types-1zE7Be71.js';
+import { A as ActionConfig } from './blocks-C4XplutK.js';
+import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
-interface ContactFaqFormValues {
-    name: string;
-    email: string;
-    subject: string;
-    message: string;
-}
 interface FaqItem {
     id: string;
     question: React.ReactNode;
@@ -59,6 +55,16 @@ interface ContactFaqProps {
      * Heading for the FAQ section
      */
     faqHeading?: React.ReactNode;
+    /**
+     * Array of form field configurations
+     * If not provided, defaults to: name, email, subject, message
+     */
+    formFields?: FormFieldConfig[];
+    /**
+     * Success message to display after form submission
+     * @default "Thank you! Your message has been sent successfully."
+     */
+    successMessage?: React.ReactNode;
     /**
      * Additional CSS classes for the section
      */
@@ -127,6 +133,14 @@ interface ContactFaqProps {
      * Additional CSS classes for the two-column grid wrapper
      */
     gridClassName?: string;
+    /**
+     * Additional CSS classes for the success message
+     */
+    successMessageClassName?: string;
+    /**
+     * Additional CSS classes for the error message
+     */
+    errorMessageClassName?: string;
     /**
      * Background style for the section
      */
@@ -150,7 +164,7 @@ interface ContactFaqProps {
     /**
      * Custom submit handler
      */
-    onSubmit?: (values: ContactFaqFormValues) => void | Promise<void>;
+    onSubmit?: (values: Record<string, any>) => void | Promise<void>;
     /**
      * Success callback
      */
@@ -161,16 +175,8 @@ interface ContactFaqProps {
     onError?: (error: Error) => void;
 }
 /**
- * ContactFaq - FAQ contact form for questions not answered in FAQ section.
- *
- * @example
- * ```tsx
- * <ContactFaq
- *   heading="Still need help?"
- *   formConfig={{ endpoint: "/api/contact", format: "json" }}
- * />
- * ```
+ * ContactFaq - FAQ contact form with flexible field configuration
  */
-declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, actions, actionsSlot, items, itemsSlot, faqHeading, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, formClassName, submitClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactFaqProps): React.JSX.Element;
+declare function ContactFaq({ heading, description, formHeading, buttonText, buttonIcon, actions, actionsSlot, items, itemsSlot, faqHeading, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, formClassName, submitClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactFaqProps): React.JSX.Element;
 
 export { ContactFaq, type ContactFaqProps, type FaqItem };