@opensite/ui 1.3.2 → 1.3.3

package/dist/footer-split-image-accordion.d.cts

@@ -0,0 +1,236 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import 'class-variance-authority';
+import './button-variants-8mtEHxev.cjs';
+import 'class-variance-authority/types';
+
+interface FooterSplitImageAccordionLink {
+    /**
+     * Link text
+     */
+    text: string;
+    /**
+     * Link URL
+     */
+    link?: string;
+}
+interface FooterSplitImageAccordionSection {
+    /**
+     * Section title
+     */
+    title: string;
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Array of links in this section
+     */
+    items: FooterSplitImageAccordionLink[];
+}
+interface FooterSplitImageAccordionSocialLink {
+    /**
+     * Icon name in format: prefix/name
+     */
+    icon: string;
+    /**
+     * Link URL
+     */
+    link: string;
+    /**
+     * Accessible label
+     */
+    label: string;
+}
+/**
+ * Footer data configuration
+ */
+interface FooterSplitImageAccordionData {
+    /** Hero image configuration */
+    image: {
+        src: string;
+        alt: string;
+    };
+    /** Logo configuration with light/dark variants */
+    logo: {
+        light: string;
+        dark: string;
+    };
+    /** Logo link URL */
+    logoUrl: string;
+    /** Brand title */
+    title: string;
+    /** Brand description */
+    description: string;
+}
+interface FooterSplitImageAccordionProps {
+    /**
+     * Newsletter title
+     */
+    newsletterTitle?: React.ReactNode;
+    /**
+     * Email input placeholder text
+     */
+    emailPlaceholder?: string;
+    /**
+     * Footer link sections
+     */
+    footerLinks?: FooterSplitImageAccordionSection[];
+    /**
+     * Social media links
+     */
+    socialLinks?: FooterSplitImageAccordionSocialLink[];
+    /**
+     * Payment method image URLs
+     */
+    paymentMethods?: string[];
+    /**
+     * Submenu links
+     */
+    submenuLinks?: FooterSplitImageAccordionLink[];
+    /**
+     * Footer data configuration
+     */
+    footerData?: FooterSplitImageAccordionData;
+    /**
+     * Copyright text
+     */
+    copyright?: React.ReactNode;
+    /**
+     * Section background variant
+     */
+    background?: SectionBackground;
+    /**
+     * Section spacing variant
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern
+     */
+    pattern?: PatternName;
+    /**
+     * Pattern opacity (0-1)
+     */
+    patternOpacity?: number;
+    /**
+     * Additional CSS classes for the footer wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the grid layout
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for the image column
+     */
+    imageColumnClassName?: string;
+    /**
+     * Additional CSS classes for the hero image
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the content column
+     */
+    contentColumnClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter section
+     */
+    newsletterSectionClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter title
+     */
+    newsletterTitleClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter form
+     */
+    newsletterFormClassName?: string;
+    /**
+     * Additional CSS classes for the social links
+     */
+    socialLinksClassName?: string;
+    /**
+     * Additional CSS classes for the brand section
+     */
+    brandSectionClassName?: string;
+    /**
+     * Additional CSS classes for the logo
+     */
+    logoClassName?: string;
+    /**
+     * Additional CSS classes for the brand title
+     */
+    brandTitleClassName?: string;
+    /**
+     * Additional CSS classes for the brand description
+     */
+    brandDescriptionClassName?: string;
+    /**
+     * Additional CSS classes for the accordion section
+     */
+    accordionClassName?: string;
+    /**
+     * Additional CSS classes for payment methods
+     */
+    paymentMethodsClassName?: string;
+    /**
+     * Additional CSS classes for the bottom section
+     */
+    bottomClassName?: string;
+    /**
+     * Additional CSS classes for the copyright
+     */
+    copyrightClassName?: string;
+    /**
+     * Additional CSS classes for submenu links
+     */
+    submenuLinksClassName?: string;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Optional form submission configuration for newsletter signup.
+     */
+    formConfig?: PageSpeedFormConfig;
+    /**
+     * Optional custom submission handler for newsletter signup.
+     */
+    onSubmit?: (email: string) => void | Promise<void>;
+    /**
+     * Optional success callback invoked after successful submission.
+     */
+    onSuccess?: (data: unknown) => void;
+    /**
+     * Optional error callback invoked if submission fails.
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Footer Split Image Accordion - A split-layout footer with large image,
+ * newsletter signup, accordion navigation, and payment methods.
+ *
+ * Layout: Two-column split with image on left, content on right.
+ * Key features: Large hero image, accordion links for mobile, payment icons.
+ * Best for: E-commerce sites, fashion brands, lifestyle businesses.
+ *
+ * @example
+ * ```tsx
+ * <FooterSplitImageAccordion
+ *   newsletterTitle="Get updates and save 20%"
+ *   footerLinks={[
+ *     { title: "Collections", id: "collections", items: [...] },
+ *   ]}
+ *   footerData={{
+ *     image: { src: "/hero.jpg", alt: "Hero" },
+ *     title: "Modern Fashion",
+ *     description: "Quality clothing for everyone.",
+ *   }}
+ * />
+ * ```
+ */
+declare function FooterSplitImageAccordion({ newsletterTitle, emailPlaceholder, footerLinks, socialLinks, paymentMethods, submenuLinks, footerData, copyright, background, spacing, pattern, patternOpacity, className, gridClassName, imageColumnClassName, imageClassName, contentColumnClassName, newsletterSectionClassName, newsletterTitleClassName, newsletterFormClassName, socialLinksClassName, brandSectionClassName, logoClassName, brandTitleClassName, brandDescriptionClassName, accordionClassName, paymentMethodsClassName, bottomClassName, copyrightClassName, submenuLinksClassName, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, }: FooterSplitImageAccordionProps): react_jsx_runtime.JSX.Element;
+
+export { FooterSplitImageAccordion, type FooterSplitImageAccordionData, type FooterSplitImageAccordionLink, type FooterSplitImageAccordionProps, type FooterSplitImageAccordionSection, type FooterSplitImageAccordionSocialLink };

package/dist/footer-split-image-accordion.d.ts

@@ -0,0 +1,236 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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-hxnFe3w6.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import 'class-variance-authority';
+import './button-variants-8mtEHxev.js';
+import 'class-variance-authority/types';
+
+interface FooterSplitImageAccordionLink {
+    /**
+     * Link text
+     */
+    text: string;
+    /**
+     * Link URL
+     */
+    link?: string;
+}
+interface FooterSplitImageAccordionSection {
+    /**
+     * Section title
+     */
+    title: string;
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Array of links in this section
+     */
+    items: FooterSplitImageAccordionLink[];
+}
+interface FooterSplitImageAccordionSocialLink {
+    /**
+     * Icon name in format: prefix/name
+     */
+    icon: string;
+    /**
+     * Link URL
+     */
+    link: string;
+    /**
+     * Accessible label
+     */
+    label: string;
+}
+/**
+ * Footer data configuration
+ */
+interface FooterSplitImageAccordionData {
+    /** Hero image configuration */
+    image: {
+        src: string;
+        alt: string;
+    };
+    /** Logo configuration with light/dark variants */
+    logo: {
+        light: string;
+        dark: string;
+    };
+    /** Logo link URL */
+    logoUrl: string;
+    /** Brand title */
+    title: string;
+    /** Brand description */
+    description: string;
+}
+interface FooterSplitImageAccordionProps {
+    /**
+     * Newsletter title
+     */
+    newsletterTitle?: React.ReactNode;
+    /**
+     * Email input placeholder text
+     */
+    emailPlaceholder?: string;
+    /**
+     * Footer link sections
+     */
+    footerLinks?: FooterSplitImageAccordionSection[];
+    /**
+     * Social media links
+     */
+    socialLinks?: FooterSplitImageAccordionSocialLink[];
+    /**
+     * Payment method image URLs
+     */
+    paymentMethods?: string[];
+    /**
+     * Submenu links
+     */
+    submenuLinks?: FooterSplitImageAccordionLink[];
+    /**
+     * Footer data configuration
+     */
+    footerData?: FooterSplitImageAccordionData;
+    /**
+     * Copyright text
+     */
+    copyright?: React.ReactNode;
+    /**
+     * Section background variant
+     */
+    background?: SectionBackground;
+    /**
+     * Section spacing variant
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern
+     */
+    pattern?: PatternName;
+    /**
+     * Pattern opacity (0-1)
+     */
+    patternOpacity?: number;
+    /**
+     * Additional CSS classes for the footer wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the grid layout
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for the image column
+     */
+    imageColumnClassName?: string;
+    /**
+     * Additional CSS classes for the hero image
+     */
+    imageClassName?: string;
+    /**
+     * Additional CSS classes for the content column
+     */
+    contentColumnClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter section
+     */
+    newsletterSectionClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter title
+     */
+    newsletterTitleClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter form
+     */
+    newsletterFormClassName?: string;
+    /**
+     * Additional CSS classes for the social links
+     */
+    socialLinksClassName?: string;
+    /**
+     * Additional CSS classes for the brand section
+     */
+    brandSectionClassName?: string;
+    /**
+     * Additional CSS classes for the logo
+     */
+    logoClassName?: string;
+    /**
+     * Additional CSS classes for the brand title
+     */
+    brandTitleClassName?: string;
+    /**
+     * Additional CSS classes for the brand description
+     */
+    brandDescriptionClassName?: string;
+    /**
+     * Additional CSS classes for the accordion section
+     */
+    accordionClassName?: string;
+    /**
+     * Additional CSS classes for payment methods
+     */
+    paymentMethodsClassName?: string;
+    /**
+     * Additional CSS classes for the bottom section
+     */
+    bottomClassName?: string;
+    /**
+     * Additional CSS classes for the copyright
+     */
+    copyrightClassName?: string;
+    /**
+     * Additional CSS classes for submenu links
+     */
+    submenuLinksClassName?: string;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Optional form submission configuration for newsletter signup.
+     */
+    formConfig?: PageSpeedFormConfig;
+    /**
+     * Optional custom submission handler for newsletter signup.
+     */
+    onSubmit?: (email: string) => void | Promise<void>;
+    /**
+     * Optional success callback invoked after successful submission.
+     */
+    onSuccess?: (data: unknown) => void;
+    /**
+     * Optional error callback invoked if submission fails.
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Footer Split Image Accordion - A split-layout footer with large image,
+ * newsletter signup, accordion navigation, and payment methods.
+ *
+ * Layout: Two-column split with image on left, content on right.
+ * Key features: Large hero image, accordion links for mobile, payment icons.
+ * Best for: E-commerce sites, fashion brands, lifestyle businesses.
+ *
+ * @example
+ * ```tsx
+ * <FooterSplitImageAccordion
+ *   newsletterTitle="Get updates and save 20%"
+ *   footerLinks={[
+ *     { title: "Collections", id: "collections", items: [...] },
+ *   ]}
+ *   footerData={{
+ *     image: { src: "/hero.jpg", alt: "Hero" },
+ *     title: "Modern Fashion",
+ *     description: "Quality clothing for everyone.",
+ *   }}
+ * />
+ * ```
+ */
+declare function FooterSplitImageAccordion({ newsletterTitle, emailPlaceholder, footerLinks, socialLinks, paymentMethods, submenuLinks, footerData, copyright, background, spacing, pattern, patternOpacity, className, gridClassName, imageColumnClassName, imageClassName, contentColumnClassName, newsletterSectionClassName, newsletterTitleClassName, newsletterFormClassName, socialLinksClassName, brandSectionClassName, logoClassName, brandTitleClassName, brandDescriptionClassName, accordionClassName, paymentMethodsClassName, bottomClassName, copyrightClassName, submenuLinksClassName, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, }: FooterSplitImageAccordionProps): react_jsx_runtime.JSX.Element;
+
+export { FooterSplitImageAccordion, type FooterSplitImageAccordionData, type FooterSplitImageAccordionLink, type FooterSplitImageAccordionProps, type FooterSplitImageAccordionSection, type FooterSplitImageAccordionSocialLink };