@opensite/ui 3.5.0 → 3.5.3

package/dist/hero-tech-carousel.d.cts

@@ -1,84 +1,189 @@
 import * as React from 'react';
+import { ImageSliderImage } from './image-slider.cjs';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
-import { O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
+import { L as LogoItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
 
-interface TechnologyItem {
+/**
+ * Configuration for a single panel in the {@link HeroTechCarousel} block.
+ *
+ * Each panel renders as a full-height column on desktop and as a stacked,
+ * content-fit row on mobile. Every visual element is optional so panels can
+ * range from purely visual (background only) to fully populated (logo +
+ * title + content + actions).
+ *
+ * @example
+ * ```tsx
+ * const item: HeroPanelItem = {
+ *   logo: { src: "/logo.svg", alt: "Brand" },
+ *   title: "Item title",
+ *   content: "Short supporting copy",
+ *   actions: [{ label: "Get Started", href: "/start" }],
+ *   backgroundMedia: [
+ *     { src: "/bg-1.jpg", alt: "" },
+ *     { src: "/bg-2.jpg", alt: "" },
+ *   ],
+ * };
+ * ```
+ */
+interface HeroPanelItem {
     /**
-     * Technology name
+     * Optional logo rendered above the title.
+     * Follows the standard {@link LogoItem} prop shape used across blocks.
+     * Default styling applies `object-contain` so SVG/PNG logos preserve aspect ratio.
      */
-    name: string;
+    logo?: LogoItem;
     /**
-     * Installation command
+     * Custom slot for the logo (overrides the {@link logo} prop).
      */
-    command: string;
+    logoSlot?: React.ReactNode;
     /**
-     * Logo image source (optional, uses default if not provided)
+     * Optional panel title.
      */
-    logo?: string;
-}
-interface HeroTechCarouselProps {
+    title?: React.ReactNode | string;
+    /**
+     * Optional supporting content rendered below the title.
+     */
+    content?: React.ReactNode | string;
+    /**
+     * Optional action buttons / links rendered at the bottom of the panel.
+     */
+    actions?: ActionConfig[];
+    /**
+     * Optional background media for the panel.
+     *
+     * - `0` items → no background, panel renders on the section background.
+     * - `1` item  → static background image.
+     * - `2+` items → autoplaying image carousel via {@link ImageSlider}.
+     */
+    backgroundMedia?: ImageSliderImage[];
+    /**
+     * Autoplay interval (ms) for this panel's background carousel.
+     * Falls back to the block-level `backgroundAutoplayIntervalMs` when omitted.
+     */
+    backgroundAutoplayIntervalMs?: number;
     /**
-     * Main heading content
+     * Optional id for the panel element (for anchor links / analytics).
      */
-    heading?: React.ReactNode;
+    id?: string;
     /**
-     * Description text below heading
+     * Additional CSS classes for this panel's outer wrapper.
      */
-    description?: React.ReactNode;
+    className?: string;
     /**
-     * Array of technology items for the carousel
+     * Additional CSS classes for the panel's content layer (above the background).
      */
-    technologies?: TechnologyItem[];
+    contentClassName?: string;
     /**
-     * Custom slot for carousel (overrides technologies array)
+     * Additional CSS classes for the panel's logo element.
      */
-    carouselSlot?: React.ReactNode;
+    logoClassName?: string;
     /**
-     * Autoplay delay in milliseconds
+     * Additional CSS classes for the panel's title element.
      */
-    autoplayDelay?: number; /**
-     * Background style for the section
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the panel's content paragraph.
+     */
+    textClassName?: string;
+    /**
+     * Additional CSS classes for the panel's actions wrapper.
+     */
+    actionsClassName?: string;
+    /**
+     * Additional CSS classes applied to the panel's background overlay.
+     * Useful for tuning legibility per-panel (e.g. `bg-black/60`).
+     */
+    overlayClassName?: string;
+    /**
+     * Per-panel OptixFlow override. Falls back to the block-level config.
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+interface HeroTechCarouselProps {
+    /**
+     * Panels rendered side-by-side on desktop and stacked on mobile.
+     * Capped at {@link HERO_TECH_CAROUSEL_MAX_ITEMS} (4) — additional entries are ignored.
+     */
+    items?: HeroPanelItem[];
+    /**
+     * Default autoplay interval (ms) used when a panel has 2+ background media
+     * items and does not specify its own `backgroundAutoplayIntervalMs`.
+     * @default 5000
+     */
+    backgroundAutoplayIntervalMs?: number;
+    /**
+     * Background style for the section.
      */
     background?: SectionBackground;
     /**
-     * Vertical spacing for the section
+     * Vertical spacing for the section. Defaults to `none` so panels can fill
+     * the full viewport on desktop without padding.
      */
     spacing?: SectionSpacing;
     /**
-     * Optional background pattern name
+     * Optional background pattern name applied to the section.
      */
     pattern?: PatternName | undefined;
     /**
-     * Pattern overlay opacity (0-1)
+     * Pattern overlay opacity (0-1).
      */
     patternOpacity?: number;
     /**
-     * Additional CSS classes for the section
+     * Additional CSS classes for the section.
      */
     className?: string;
     /**
-     * Additional CSS classes for the container
+     * Additional CSS classes for the section container.
      */
     containerClassName?: string;
     /**
-     * Additional CSS classes for the heading
+     * Additional CSS classes for the panels wrapper (the flex/grid track).
      */
-    headingClassName?: string;
+    panelsClassName?: string;
     /**
-     * Additional CSS classes for the description
+     * Default classes shared by every panel content layer (title/content/actions).
+     * Per-panel `contentClassName` is appended after this.
      */
-    descriptionClassName?: string;
+    panelContentClassName?: string;
     /**
-     * OptixFlow image optimization configuration
+     * Block-level OptixFlow image optimization configuration. Applies to all
+     * panels unless a panel provides its own `optixFlowConfig`.
      */
     optixFlowConfig?: OptixFlowConfig;
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroTechCarousel({ sectionId, heading, description, technologies, carouselSlot, autoplayDelay, background, pattern, patternOpacity, className, containerClassName, spacing, headingClassName, descriptionClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
+/**
+ * Hero block that renders 1–4 side-by-side panels on desktop and stacks them
+ * vertically on mobile. Each panel can include a logo, title, supporting copy,
+ * actions, and an optional background image or autoplaying image carousel.
+ *
+ * - Desktop: full-bleed `100vw` width, `100dvh` height, panels share the row equally.
+ * - Mobile: panels stack vertically with content-fit height and modern padding.
+ *
+ * @example
+ * ```tsx
+ * <HeroTechCarousel
+ *   items={[
+ *     {
+ *       logo: { src: "/logos/insurance.svg", alt: "InsuranceSite" },
+ *       title: "InsuranceSite",
+ *       content: "Built for modern brokers",
+ *       actions: [{ label: "Get Started", href: "/insurance" }],
+ *       backgroundMedia: [
+ *         { src: "/img/insurance-1.jpg", alt: "" },
+ *         { src: "/img/insurance-2.jpg", alt: "" },
+ *       ],
+ *     },
+ *     // ... up to 4 items
+ *   ]}
+ * />
+ * ```
+ */
+declare function HeroTechCarousel({ sectionId, items, backgroundAutoplayIntervalMs, background, spacing, pattern, patternOpacity, className, containerClassName, panelsClassName, panelContentClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
 
 export { HeroTechCarousel, type HeroTechCarouselProps };

package/dist/hero-tech-carousel.d.ts

@@ -1,84 +1,189 @@
 import * as React from 'react';
+import { ImageSliderImage } from './image-slider.js';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
-import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
+import { L as LogoItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DyouPohq.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
 
-interface TechnologyItem {
+/**
+ * Configuration for a single panel in the {@link HeroTechCarousel} block.
+ *
+ * Each panel renders as a full-height column on desktop and as a stacked,
+ * content-fit row on mobile. Every visual element is optional so panels can
+ * range from purely visual (background only) to fully populated (logo +
+ * title + content + actions).
+ *
+ * @example
+ * ```tsx
+ * const item: HeroPanelItem = {
+ *   logo: { src: "/logo.svg", alt: "Brand" },
+ *   title: "Item title",
+ *   content: "Short supporting copy",
+ *   actions: [{ label: "Get Started", href: "/start" }],
+ *   backgroundMedia: [
+ *     { src: "/bg-1.jpg", alt: "" },
+ *     { src: "/bg-2.jpg", alt: "" },
+ *   ],
+ * };
+ * ```
+ */
+interface HeroPanelItem {
     /**
-     * Technology name
+     * Optional logo rendered above the title.
+     * Follows the standard {@link LogoItem} prop shape used across blocks.
+     * Default styling applies `object-contain` so SVG/PNG logos preserve aspect ratio.
      */
-    name: string;
+    logo?: LogoItem;
     /**
-     * Installation command
+     * Custom slot for the logo (overrides the {@link logo} prop).
      */
-    command: string;
+    logoSlot?: React.ReactNode;
     /**
-     * Logo image source (optional, uses default if not provided)
+     * Optional panel title.
      */
-    logo?: string;
-}
-interface HeroTechCarouselProps {
+    title?: React.ReactNode | string;
+    /**
+     * Optional supporting content rendered below the title.
+     */
+    content?: React.ReactNode | string;
+    /**
+     * Optional action buttons / links rendered at the bottom of the panel.
+     */
+    actions?: ActionConfig[];
+    /**
+     * Optional background media for the panel.
+     *
+     * - `0` items → no background, panel renders on the section background.
+     * - `1` item  → static background image.
+     * - `2+` items → autoplaying image carousel via {@link ImageSlider}.
+     */
+    backgroundMedia?: ImageSliderImage[];
+    /**
+     * Autoplay interval (ms) for this panel's background carousel.
+     * Falls back to the block-level `backgroundAutoplayIntervalMs` when omitted.
+     */
+    backgroundAutoplayIntervalMs?: number;
     /**
-     * Main heading content
+     * Optional id for the panel element (for anchor links / analytics).
      */
-    heading?: React.ReactNode;
+    id?: string;
     /**
-     * Description text below heading
+     * Additional CSS classes for this panel's outer wrapper.
      */
-    description?: React.ReactNode;
+    className?: string;
     /**
-     * Array of technology items for the carousel
+     * Additional CSS classes for the panel's content layer (above the background).
      */
-    technologies?: TechnologyItem[];
+    contentClassName?: string;
     /**
-     * Custom slot for carousel (overrides technologies array)
+     * Additional CSS classes for the panel's logo element.
      */
-    carouselSlot?: React.ReactNode;
+    logoClassName?: string;
     /**
-     * Autoplay delay in milliseconds
+     * Additional CSS classes for the panel's title element.
      */
-    autoplayDelay?: number; /**
-     * Background style for the section
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the panel's content paragraph.
+     */
+    textClassName?: string;
+    /**
+     * Additional CSS classes for the panel's actions wrapper.
+     */
+    actionsClassName?: string;
+    /**
+     * Additional CSS classes applied to the panel's background overlay.
+     * Useful for tuning legibility per-panel (e.g. `bg-black/60`).
+     */
+    overlayClassName?: string;
+    /**
+     * Per-panel OptixFlow override. Falls back to the block-level config.
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+interface HeroTechCarouselProps {
+    /**
+     * Panels rendered side-by-side on desktop and stacked on mobile.
+     * Capped at {@link HERO_TECH_CAROUSEL_MAX_ITEMS} (4) — additional entries are ignored.
+     */
+    items?: HeroPanelItem[];
+    /**
+     * Default autoplay interval (ms) used when a panel has 2+ background media
+     * items and does not specify its own `backgroundAutoplayIntervalMs`.
+     * @default 5000
+     */
+    backgroundAutoplayIntervalMs?: number;
+    /**
+     * Background style for the section.
      */
     background?: SectionBackground;
     /**
-     * Vertical spacing for the section
+     * Vertical spacing for the section. Defaults to `none` so panels can fill
+     * the full viewport on desktop without padding.
      */
     spacing?: SectionSpacing;
     /**
-     * Optional background pattern name
+     * Optional background pattern name applied to the section.
      */
     pattern?: PatternName | undefined;
     /**
-     * Pattern overlay opacity (0-1)
+     * Pattern overlay opacity (0-1).
      */
     patternOpacity?: number;
     /**
-     * Additional CSS classes for the section
+     * Additional CSS classes for the section.
      */
     className?: string;
     /**
-     * Additional CSS classes for the container
+     * Additional CSS classes for the section container.
      */
     containerClassName?: string;
     /**
-     * Additional CSS classes for the heading
+     * Additional CSS classes for the panels wrapper (the flex/grid track).
      */
-    headingClassName?: string;
+    panelsClassName?: string;
     /**
-     * Additional CSS classes for the description
+     * Default classes shared by every panel content layer (title/content/actions).
+     * Per-panel `contentClassName` is appended after this.
      */
-    descriptionClassName?: string;
+    panelContentClassName?: string;
     /**
-     * OptixFlow image optimization configuration
+     * Block-level OptixFlow image optimization configuration. Applies to all
+     * panels unless a panel provides its own `optixFlowConfig`.
      */
     optixFlowConfig?: OptixFlowConfig;
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroTechCarousel({ sectionId, heading, description, technologies, carouselSlot, autoplayDelay, background, pattern, patternOpacity, className, containerClassName, spacing, headingClassName, descriptionClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
+/**
+ * Hero block that renders 1–4 side-by-side panels on desktop and stacks them
+ * vertically on mobile. Each panel can include a logo, title, supporting copy,
+ * actions, and an optional background image or autoplaying image carousel.
+ *
+ * - Desktop: full-bleed `100vw` width, `100dvh` height, panels share the row equally.
+ * - Mobile: panels stack vertically with content-fit height and modern padding.
+ *
+ * @example
+ * ```tsx
+ * <HeroTechCarousel
+ *   items={[
+ *     {
+ *       logo: { src: "/logos/insurance.svg", alt: "InsuranceSite" },
+ *       title: "InsuranceSite",
+ *       content: "Built for modern brokers",
+ *       actions: [{ label: "Get Started", href: "/insurance" }],
+ *       backgroundMedia: [
+ *         { src: "/img/insurance-1.jpg", alt: "" },
+ *         { src: "/img/insurance-2.jpg", alt: "" },
+ *       ],
+ *     },
+ *     // ... up to 4 items
+ *   ]}
+ * />
+ * ```
+ */
+declare function HeroTechCarousel({ sectionId, items, backgroundAutoplayIntervalMs, background, spacing, pattern, patternOpacity, className, containerClassName, panelsClassName, panelContentClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
 
 export { HeroTechCarousel, type HeroTechCarouselProps };