@opensite/ui 1.3.2 → 1.3.4

package/dist/footer-info-cards-accordion.d.cts

@@ -0,0 +1,278 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.cjs';
+import 'class-variance-authority/types';
+
+interface FooterInfoCardsAccordionInfoItem {
+    /**
+     * Icon name in format: prefix/name
+     */
+    icon: string;
+    /**
+     * Info item title
+     */
+    title: string;
+    /**
+     * Info item text
+     */
+    text: string;
+    /**
+     * Optional link URL
+     */
+    link?: string;
+}
+interface FooterInfoCardsAccordionLink {
+    /**
+     * Link text
+     */
+    text: string;
+    /**
+     * Link URL
+     */
+    link?: string;
+}
+interface FooterInfoCardsAccordionSection {
+    /**
+     * Section title
+     */
+    title: string;
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Array of links in this section
+     */
+    items: FooterInfoCardsAccordionLink[];
+}
+interface FooterInfoCardsAccordionSocialLink {
+    /**
+     * Icon name in format: prefix/name
+     */
+    icon: string;
+    /**
+     * Link URL
+     */
+    link: string;
+    /**
+     * Accessible label
+     */
+    label: string;
+}
+/**
+ * Footer details configuration
+ */
+interface FooterInfoCardsAccordionDetails {
+    /** 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 description text */
+    description: string;
+}
+interface FooterInfoCardsAccordionProps {
+    /**
+     * Newsletter title
+     */
+    newsletterTitle?: React.ReactNode;
+    /**
+     * Newsletter description
+     */
+    newsletterDescription?: React.ReactNode;
+    /**
+     * Email input placeholder text
+     */
+    emailPlaceholder?: string;
+    /**
+     * Subscribe button text
+     */
+    subscribeText?: React.ReactNode;
+    /**
+     * Terms text before links
+     */
+    termsText?: React.ReactNode;
+    /**
+     * Terms of Use link text
+     */
+    termsLinkText?: React.ReactNode;
+    /**
+     * Terms of Use link URL
+     */
+    termsLinkUrl?: string;
+    /**
+     * Privacy Policy link text
+     */
+    privacyLinkText?: React.ReactNode;
+    /**
+     * Privacy Policy link URL
+     */
+    privacyLinkUrl?: string;
+    /**
+     * Info section items (contact cards)
+     */
+    infoItems?: FooterInfoCardsAccordionInfoItem[];
+    /**
+     * Footer link sections
+     */
+    footerLinks?: FooterInfoCardsAccordionSection[];
+    /**
+     * Social media links
+     */
+    socialLinks?: FooterInfoCardsAccordionSocialLink[];
+    /**
+     * Payment method image URLs
+     */
+    paymentMethods?: string[];
+    /**
+     * Submenu links
+     */
+    submenuLinks?: FooterInfoCardsAccordionLink[];
+    /**
+     * Footer details configuration
+     */
+    footerDetails?: FooterInfoCardsAccordionDetails;
+    /**
+     * Copyright text
+     */
+    copyright?: React.ReactNode;
+    /**
+     * Additional CSS classes for the section wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content wrapper
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter grid
+     */
+    newsletterGridClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter image wrapper
+     */
+    newsletterImageClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter content
+     */
+    newsletterContentClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter title
+     */
+    newsletterTitleClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter description
+     */
+    newsletterDescriptionClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter form
+     */
+    newsletterFormClassName?: string;
+    /**
+     * Additional CSS classes for the info cards grid
+     */
+    infoCardsGridClassName?: string;
+    /**
+     * Additional CSS classes for info cards
+     */
+    infoCardClassName?: string;
+    /**
+     * Additional CSS classes for the brand/accordion grid
+     */
+    brandGridClassName?: string;
+    /**
+     * Additional CSS classes for the brand column
+     */
+    brandColumnClassName?: string;
+    /**
+     * Additional CSS classes for the logo
+     */
+    logoClassName?: string;
+    /**
+     * Additional CSS classes for the brand description
+     */
+    brandDescriptionClassName?: string;
+    /**
+     * Additional CSS classes for the accordion column
+     */
+    accordionColumnClassName?: string;
+    /**
+     * Additional CSS classes for the payment/social row
+     */
+    paymentSocialRowClassName?: string;
+    /**
+     * Additional CSS classes for payment methods
+     */
+    paymentMethodsClassName?: string;
+    /**
+     * Additional CSS classes for social links
+     */
+    socialLinksClassName?: 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;
+    /**
+     * Section background variant
+     */
+    background?: SectionBackground;
+    /**
+     * Section spacing variant
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern opacity (0-1)
+     */
+    patternOpacity?: number;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+/**
+ * Footer Info Cards Accordion - A comprehensive footer with info cards,
+ * newsletter, accordion navigation, payment methods, and social links.
+ *
+ * Layout: Hero image with newsletter, info cards grid, accordion links.
+ * Key features: Contact info cards, payment method icons, language selector.
+ * Best for: E-commerce sites, service businesses, customer-focused brands.
+ *
+ * @example
+ * ```tsx
+ * <FooterInfoCardsAccordion
+ *   newsletterTitle="Newsletter"
+ *   newsletterDescription="Join for exclusive offers."
+ *   infoItems={[
+ *     { icon: "lucide/phone", title: "Call Us", text: "+1 555-1234" },
+ *   ]}
+ *   footerLinks={[
+ *     { title: "Shop", id: "shop", items: [...] },
+ *   ]}
+ * />
+ * ```
+ */
+declare function FooterInfoCardsAccordion({ newsletterTitle, newsletterDescription, emailPlaceholder, subscribeText, termsText, termsLinkText, termsLinkUrl, privacyLinkText, privacyLinkUrl, infoItems, footerLinks, socialLinks, paymentMethods, submenuLinks, footerDetails, copyright, className, contentClassName, newsletterGridClassName, newsletterImageClassName, newsletterContentClassName, newsletterTitleClassName, newsletterDescriptionClassName, newsletterFormClassName, infoCardsGridClassName, infoCardClassName, brandGridClassName, brandColumnClassName, logoClassName, brandDescriptionClassName, accordionColumnClassName, paymentSocialRowClassName, paymentMethodsClassName, socialLinksClassName, bottomClassName, copyrightClassName, submenuLinksClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterInfoCardsAccordionProps): react_jsx_runtime.JSX.Element;
+
+export { FooterInfoCardsAccordion, type FooterInfoCardsAccordionInfoItem, type FooterInfoCardsAccordionLink, type FooterInfoCardsAccordionProps, type FooterInfoCardsAccordionSection, type FooterInfoCardsAccordionSocialLink };

package/dist/footer-info-cards-accordion.d.ts

@@ -0,0 +1,278 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.js';
+import 'class-variance-authority/types';
+
+interface FooterInfoCardsAccordionInfoItem {
+    /**
+     * Icon name in format: prefix/name
+     */
+    icon: string;
+    /**
+     * Info item title
+     */
+    title: string;
+    /**
+     * Info item text
+     */
+    text: string;
+    /**
+     * Optional link URL
+     */
+    link?: string;
+}
+interface FooterInfoCardsAccordionLink {
+    /**
+     * Link text
+     */
+    text: string;
+    /**
+     * Link URL
+     */
+    link?: string;
+}
+interface FooterInfoCardsAccordionSection {
+    /**
+     * Section title
+     */
+    title: string;
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Array of links in this section
+     */
+    items: FooterInfoCardsAccordionLink[];
+}
+interface FooterInfoCardsAccordionSocialLink {
+    /**
+     * Icon name in format: prefix/name
+     */
+    icon: string;
+    /**
+     * Link URL
+     */
+    link: string;
+    /**
+     * Accessible label
+     */
+    label: string;
+}
+/**
+ * Footer details configuration
+ */
+interface FooterInfoCardsAccordionDetails {
+    /** 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 description text */
+    description: string;
+}
+interface FooterInfoCardsAccordionProps {
+    /**
+     * Newsletter title
+     */
+    newsletterTitle?: React.ReactNode;
+    /**
+     * Newsletter description
+     */
+    newsletterDescription?: React.ReactNode;
+    /**
+     * Email input placeholder text
+     */
+    emailPlaceholder?: string;
+    /**
+     * Subscribe button text
+     */
+    subscribeText?: React.ReactNode;
+    /**
+     * Terms text before links
+     */
+    termsText?: React.ReactNode;
+    /**
+     * Terms of Use link text
+     */
+    termsLinkText?: React.ReactNode;
+    /**
+     * Terms of Use link URL
+     */
+    termsLinkUrl?: string;
+    /**
+     * Privacy Policy link text
+     */
+    privacyLinkText?: React.ReactNode;
+    /**
+     * Privacy Policy link URL
+     */
+    privacyLinkUrl?: string;
+    /**
+     * Info section items (contact cards)
+     */
+    infoItems?: FooterInfoCardsAccordionInfoItem[];
+    /**
+     * Footer link sections
+     */
+    footerLinks?: FooterInfoCardsAccordionSection[];
+    /**
+     * Social media links
+     */
+    socialLinks?: FooterInfoCardsAccordionSocialLink[];
+    /**
+     * Payment method image URLs
+     */
+    paymentMethods?: string[];
+    /**
+     * Submenu links
+     */
+    submenuLinks?: FooterInfoCardsAccordionLink[];
+    /**
+     * Footer details configuration
+     */
+    footerDetails?: FooterInfoCardsAccordionDetails;
+    /**
+     * Copyright text
+     */
+    copyright?: React.ReactNode;
+    /**
+     * Additional CSS classes for the section wrapper
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the content wrapper
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter grid
+     */
+    newsletterGridClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter image wrapper
+     */
+    newsletterImageClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter content
+     */
+    newsletterContentClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter title
+     */
+    newsletterTitleClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter description
+     */
+    newsletterDescriptionClassName?: string;
+    /**
+     * Additional CSS classes for the newsletter form
+     */
+    newsletterFormClassName?: string;
+    /**
+     * Additional CSS classes for the info cards grid
+     */
+    infoCardsGridClassName?: string;
+    /**
+     * Additional CSS classes for info cards
+     */
+    infoCardClassName?: string;
+    /**
+     * Additional CSS classes for the brand/accordion grid
+     */
+    brandGridClassName?: string;
+    /**
+     * Additional CSS classes for the brand column
+     */
+    brandColumnClassName?: string;
+    /**
+     * Additional CSS classes for the logo
+     */
+    logoClassName?: string;
+    /**
+     * Additional CSS classes for the brand description
+     */
+    brandDescriptionClassName?: string;
+    /**
+     * Additional CSS classes for the accordion column
+     */
+    accordionColumnClassName?: string;
+    /**
+     * Additional CSS classes for the payment/social row
+     */
+    paymentSocialRowClassName?: string;
+    /**
+     * Additional CSS classes for payment methods
+     */
+    paymentMethodsClassName?: string;
+    /**
+     * Additional CSS classes for social links
+     */
+    socialLinksClassName?: 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;
+    /**
+     * Section background variant
+     */
+    background?: SectionBackground;
+    /**
+     * Section spacing variant
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern opacity (0-1)
+     */
+    patternOpacity?: number;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+/**
+ * Footer Info Cards Accordion - A comprehensive footer with info cards,
+ * newsletter, accordion navigation, payment methods, and social links.
+ *
+ * Layout: Hero image with newsletter, info cards grid, accordion links.
+ * Key features: Contact info cards, payment method icons, language selector.
+ * Best for: E-commerce sites, service businesses, customer-focused brands.
+ *
+ * @example
+ * ```tsx
+ * <FooterInfoCardsAccordion
+ *   newsletterTitle="Newsletter"
+ *   newsletterDescription="Join for exclusive offers."
+ *   infoItems={[
+ *     { icon: "lucide/phone", title: "Call Us", text: "+1 555-1234" },
+ *   ]}
+ *   footerLinks={[
+ *     { title: "Shop", id: "shop", items: [...] },
+ *   ]}
+ * />
+ * ```
+ */
+declare function FooterInfoCardsAccordion({ newsletterTitle, newsletterDescription, emailPlaceholder, subscribeText, termsText, termsLinkText, termsLinkUrl, privacyLinkText, privacyLinkUrl, infoItems, footerLinks, socialLinks, paymentMethods, submenuLinks, footerDetails, copyright, className, contentClassName, newsletterGridClassName, newsletterImageClassName, newsletterContentClassName, newsletterTitleClassName, newsletterDescriptionClassName, newsletterFormClassName, infoCardsGridClassName, infoCardClassName, brandGridClassName, brandColumnClassName, logoClassName, brandDescriptionClassName, accordionColumnClassName, paymentSocialRowClassName, paymentMethodsClassName, socialLinksClassName, bottomClassName, copyrightClassName, submenuLinksClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterInfoCardsAccordionProps): react_jsx_runtime.JSX.Element;
+
+export { FooterInfoCardsAccordion, type FooterInfoCardsAccordionInfoItem, type FooterInfoCardsAccordionLink, type FooterInfoCardsAccordionProps, type FooterInfoCardsAccordionSection, type FooterInfoCardsAccordionSocialLink };