@opensite/ui 1.3.2 → 1.3.4

package/dist/offer-modal-sheet-newsletter.d.cts

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.cjs';
+import { f as SectionBackground } from './community-initiatives-Bz_A5vLU.cjs';
+import { L as LogoItem, I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.cjs';
+import 'class-variance-authority/types';
+
+interface OfferModalSheetNewsletterProps {
+    /**
+     * Logo configuration
+     */
+    logo?: LogoItem;
+    /**
+     * Custom slot for rendering the logo (overrides logo prop)
+     */
+    logoSlot?: React.ReactNode;
+    /**
+     * Main title content for the offer
+     */
+    title?: React.ReactNode;
+    /**
+     * Description content below the title
+     */
+    description?: React.ReactNode;
+    /**
+     * Image configuration for the bottom section
+     */
+    image?: ImageItem;
+    /**
+     * Custom slot for rendering the image (overrides image prop)
+     */
+    imageSlot?: React.ReactNode;
+    /**
+     * Placeholder text for the email input
+     */
+    emailPlaceholder?: string;
+    /**
+     * Text/content for the submit button
+     */
+    buttonText?: React.ReactNode;
+    /**
+     * Terms of use link URL
+     */
+    termsUrl?: string;
+    /**
+     * Terms of use link text
+     */
+    termsText?: React.ReactNode;
+    /**
+     * Privacy policy link URL
+     */
+    privacyUrl?: string;
+    /**
+     * Privacy policy link text
+     */
+    privacyText?: React.ReactNode;
+    /**
+     * Custom slot for the legal text area (overrides terms/privacy links)
+     */
+    legalSlot?: React.ReactNode;
+    /**
+     * Custom slot for the close button (overrides default close button)
+     */
+    closeButtonSlot?: React.ReactNode;
+    /**
+     * Custom slot for the form (overrides default form)
+     */
+    formSlot?: React.ReactNode;
+    /**
+     * Custom slot for the header area (overrides logo, title, description)
+     */
+    headerSlot?: React.ReactNode;
+    /**
+     * Whether the sheet is open (controlled mode)
+     */
+    open?: boolean;
+    /**
+     * Callback when the sheet open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the sheet is open by default (uncontrolled mode)
+     */
+    defaultOpen?: boolean;
+    /**
+     * Optional custom submission handler for maximum flexibility.
+     *
+     * Use this when you need complete control over the submission logic,
+     * such as custom API calls, analytics tracking, or multi-step workflows.
+     *
+     * Can be used alone or in combination with `formConfig` for hybrid approaches.
+     *
+     * @example
+     * onSubmit={async (email) => {
+     *   await fetch("/api/subscribe", {
+     *     method: "POST",
+     *     body: JSON.stringify({ email, source: "offer-modal" })
+     *   });
+     * }}
+     */
+    onSubmit?: (email: string) => void | Promise<void>;
+    /**
+     * Optional form submission configuration.
+     *
+     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
+     * and the form will submit to it in JSON format.
+     *
+     * @example
+     * // Works with any API
+     * formConfig={{ endpoint: "https://api.mysite.com/subscribe", format: "json" }}
+     *
+     * @example
+     * // With custom headers (e.g., authentication)
+     * formConfig={{
+     *   endpoint: "/api/newsletter",
+     *   headers: { "Authorization": "Bearer token123" }
+     * }}
+     *
+     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
+     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
+     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
+     *
+     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
+     */
+    formConfig?: PageSpeedFormConfig;
+    /**
+     * Optional success callback invoked after successful submission.
+     *
+     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
+     * Use for showing success messages, redirecting, analytics tracking, etc.
+     */
+    onSuccess?: (data: unknown) => void;
+    /**
+     * Optional error callback invoked if submission fails.
+     *
+     * Receives the error object for custom error handling, logging, or user notifications.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Additional CSS classes for the sheet content wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content area
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the logo
+     */
+    logoClassName?: string;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the form
+     */
+    formClassName?: string;
+    /**
+     * Additional CSS classes for the email input
+     */
+    inputClassName?: string;
+    /**
+     * Additional CSS classes for the submit button
+     */
+    submitClassName?: string;
+    /**
+     * Additional CSS classes for the legal text
+     */
+    legalClassName?: string;
+    /**
+     * Additional CSS classes for the image wrapper
+     */
+    imageWrapperClassName?: string;
+    /**
+     * Additional CSS classes for the image element
+     */
+    imageClassName?: string;
+    /**
+     * Optional configuration for OptixFlow image optimization
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style variant for the section
+     * @default "default"
+     */
+    background?: SectionBackground;
+}
+/**
+ * OfferModalSheetNewsletter - A side-sheet style newsletter signup modal that slides in from
+ * the right. Features a logo, compelling headline, description, email signup form with rounded
+ * inputs, legal consent links, and a square aspect ratio promotional image. The sheet design
+ * provides a more immersive experience while maintaining easy dismissal. Perfect for premium
+ * brands, lifestyle products, or any site wanting a sophisticated newsletter capture experience.
+ *
+ * @example
+ * ```tsx
+ * <OfferModalSheetNewsletter
+ *   logo={{ src: "/logo.png", alt: "Brand Logo" }}
+ *   title="Join Now & Enjoy 20% Off"
+ *   description="Join our mailing list for updates and offers."
+ *   image={{ src: "/promo.jpg", alt: "Promotional image" }}
+ *   termsUrl="/terms"
+ *   privacyUrl="/privacy"
+ *   onSubmit={(email) => console.log('Subscribed:', email)}
+ * />
+ * ```
+ */
+declare function OfferModalSheetNewsletter({ logo, logoSlot, title, description, image, imageSlot, emailPlaceholder, buttonText, termsUrl, termsText, privacyUrl, privacyText, legalSlot, closeButtonSlot, formSlot, headerSlot, open, onOpenChange, defaultOpen, onSubmit, formConfig, onSuccess, onError, className, contentClassName, headerClassName, logoClassName, titleClassName, descriptionClassName, formClassName, inputClassName, submitClassName, legalClassName, imageWrapperClassName, imageClassName, optixFlowConfig, background, }: OfferModalSheetNewsletterProps): React.JSX.Element;
+
+export { OfferModalSheetNewsletter, type OfferModalSheetNewsletterProps };

package/dist/offer-modal-sheet-newsletter.d.ts

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.js';
+import { f as SectionBackground } from './community-initiatives-Bi_ClKrO.js';
+import { L as LogoItem, I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.js';
+import 'class-variance-authority/types';
+
+interface OfferModalSheetNewsletterProps {
+    /**
+     * Logo configuration
+     */
+    logo?: LogoItem;
+    /**
+     * Custom slot for rendering the logo (overrides logo prop)
+     */
+    logoSlot?: React.ReactNode;
+    /**
+     * Main title content for the offer
+     */
+    title?: React.ReactNode;
+    /**
+     * Description content below the title
+     */
+    description?: React.ReactNode;
+    /**
+     * Image configuration for the bottom section
+     */
+    image?: ImageItem;
+    /**
+     * Custom slot for rendering the image (overrides image prop)
+     */
+    imageSlot?: React.ReactNode;
+    /**
+     * Placeholder text for the email input
+     */
+    emailPlaceholder?: string;
+    /**
+     * Text/content for the submit button
+     */
+    buttonText?: React.ReactNode;
+    /**
+     * Terms of use link URL
+     */
+    termsUrl?: string;
+    /**
+     * Terms of use link text
+     */
+    termsText?: React.ReactNode;
+    /**
+     * Privacy policy link URL
+     */
+    privacyUrl?: string;
+    /**
+     * Privacy policy link text
+     */
+    privacyText?: React.ReactNode;
+    /**
+     * Custom slot for the legal text area (overrides terms/privacy links)
+     */
+    legalSlot?: React.ReactNode;
+    /**
+     * Custom slot for the close button (overrides default close button)
+     */
+    closeButtonSlot?: React.ReactNode;
+    /**
+     * Custom slot for the form (overrides default form)
+     */
+    formSlot?: React.ReactNode;
+    /**
+     * Custom slot for the header area (overrides logo, title, description)
+     */
+    headerSlot?: React.ReactNode;
+    /**
+     * Whether the sheet is open (controlled mode)
+     */
+    open?: boolean;
+    /**
+     * Callback when the sheet open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the sheet is open by default (uncontrolled mode)
+     */
+    defaultOpen?: boolean;
+    /**
+     * Optional custom submission handler for maximum flexibility.
+     *
+     * Use this when you need complete control over the submission logic,
+     * such as custom API calls, analytics tracking, or multi-step workflows.
+     *
+     * Can be used alone or in combination with `formConfig` for hybrid approaches.
+     *
+     * @example
+     * onSubmit={async (email) => {
+     *   await fetch("/api/subscribe", {
+     *     method: "POST",
+     *     body: JSON.stringify({ email, source: "offer-modal" })
+     *   });
+     * }}
+     */
+    onSubmit?: (email: string) => void | Promise<void>;
+    /**
+     * Optional form submission configuration.
+     *
+     * **Universal Usage**: Works with ANY REST API endpoint. Simply provide an `endpoint` URL
+     * and the form will submit to it in JSON format.
+     *
+     * @example
+     * // Works with any API
+     * formConfig={{ endpoint: "https://api.mysite.com/subscribe", format: "json" }}
+     *
+     * @example
+     * // With custom headers (e.g., authentication)
+     * formConfig={{
+     *   endpoint: "/api/newsletter",
+     *   headers: { "Authorization": "Bearer token123" }
+     * }}
+     *
+     * **Note**: The `apiKey`, `contactCategoryToken`, and other platform-specific fields
+     * are OPTIONAL and only needed when integrating with DashTrack's Rails backend.
+     * For generic REST APIs, just use `endpoint`, `method`, `format`, and `headers`.
+     *
+     * See `FORMS_INTEGRATION_GUIDE.md` for complete examples with Next.js, React, and more.
+     */
+    formConfig?: PageSpeedFormConfig;
+    /**
+     * Optional success callback invoked after successful submission.
+     *
+     * Called after `formConfig` submission and/or `onSubmit` completes successfully.
+     * Use for showing success messages, redirecting, analytics tracking, etc.
+     */
+    onSuccess?: (data: unknown) => void;
+    /**
+     * Optional error callback invoked if submission fails.
+     *
+     * Receives the error object for custom error handling, logging, or user notifications.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Additional CSS classes for the sheet content wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content area
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the logo
+     */
+    logoClassName?: string;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the form
+     */
+    formClassName?: string;
+    /**
+     * Additional CSS classes for the email input
+     */
+    inputClassName?: string;
+    /**
+     * Additional CSS classes for the submit button
+     */
+    submitClassName?: string;
+    /**
+     * Additional CSS classes for the legal text
+     */
+    legalClassName?: string;
+    /**
+     * Additional CSS classes for the image wrapper
+     */
+    imageWrapperClassName?: string;
+    /**
+     * Additional CSS classes for the image element
+     */
+    imageClassName?: string;
+    /**
+     * Optional configuration for OptixFlow image optimization
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background style variant for the section
+     * @default "default"
+     */
+    background?: SectionBackground;
+}
+/**
+ * OfferModalSheetNewsletter - A side-sheet style newsletter signup modal that slides in from
+ * the right. Features a logo, compelling headline, description, email signup form with rounded
+ * inputs, legal consent links, and a square aspect ratio promotional image. The sheet design
+ * provides a more immersive experience while maintaining easy dismissal. Perfect for premium
+ * brands, lifestyle products, or any site wanting a sophisticated newsletter capture experience.
+ *
+ * @example
+ * ```tsx
+ * <OfferModalSheetNewsletter
+ *   logo={{ src: "/logo.png", alt: "Brand Logo" }}
+ *   title="Join Now & Enjoy 20% Off"
+ *   description="Join our mailing list for updates and offers."
+ *   image={{ src: "/promo.jpg", alt: "Promotional image" }}
+ *   termsUrl="/terms"
+ *   privacyUrl="/privacy"
+ *   onSubmit={(email) => console.log('Subscribed:', email)}
+ * />
+ * ```
+ */
+declare function OfferModalSheetNewsletter({ logo, logoSlot, title, description, image, imageSlot, emailPlaceholder, buttonText, termsUrl, termsText, privacyUrl, privacyText, legalSlot, closeButtonSlot, formSlot, headerSlot, open, onOpenChange, defaultOpen, onSubmit, formConfig, onSuccess, onError, className, contentClassName, headerClassName, logoClassName, titleClassName, descriptionClassName, formClassName, inputClassName, submitClassName, legalClassName, imageWrapperClassName, imageClassName, optixFlowConfig, background, }: OfferModalSheetNewsletterProps): React.JSX.Element;
+
+export { OfferModalSheetNewsletter, type OfferModalSheetNewsletterProps };