@affinda/react 0.0.19 → 0.0.21

package/README.md

@@ -115,6 +115,10 @@ import { Button, Heading, TypographyLockup } from '@affinda/react';
 - **TestimonialCarousel** / AfTestimonialCarousel - Carousel for sliding between multiple testimonials
 - **TestimonialStat** / AfTestimonialStat - Individual statistics within testimonials
 
+**Feature Showcase:**
+- **FeatureAccordion** / AfFeatureAccordion - Expandable accordion with auto-cycling timer and image display
+- **CtaSection** / AfCtaSection - Call-to-action section with illustration and buttons
+
 **Brand:**
 - **Logo** / AfLogo - Affinda logo component
 
@@ -327,12 +331,12 @@ import { HeroSection, PaperclipDecoration } from '@affinda/react';
 **Button**
 - Primary actions: Use `variant="primary"` (sparingly, 1-2 per screen)
 - Secondary actions: Use `variant="secondary"`
-- Sizes: `small`, `default`, `large`
+- Sizes: `small`, `default`
 - Can include icons in left or right slots
 - On dark backgrounds, pass `darkBackground={true}` so borders/text flip automatically
 
 ```tsx
-<Button variant="primary" size="large">Sign Up Now</Button>
+<Button variant="primary">Sign Up Now</Button>
 <Button variant="secondary">Learn More</Button>
 ```
 
@@ -430,6 +434,72 @@ Site-wide navigation header with responsive design and mobile menu support.
 - Variant: `"01"` (primary links), `"02"` (secondary/utility links)
 - Variant: Controls visual style
 
+#### Feature Showcase
+
+**FeatureAccordion**
+- Expandable accordion for showcasing product features
+- Auto-cycles through items with a visual progress timer
+- Displays accompanying images that change with each item
+- Timer resets when user clicks an item
+
+```tsx
+import { FeatureAccordion } from '@affinda/react';
+
+<FeatureAccordion
+  heading="Give AI agents your paperwork"
+  items={JSON.stringify([
+    {
+      title: "Automate document processing with 99%+ accuracy",
+      description: "Extract any information from any document with industry-leading precision.",
+      imageUrl: "https://example.com/feature1.jpg",
+      imageAlt: "Document automation"
+    },
+    {
+      title: "Build models in minutes, not months",
+      description: "Affinda learns instantly from every interaction.",
+      imageUrl: "https://example.com/feature2.jpg",
+      imageAlt: "Fast model building"
+    }
+  ])}
+  cycleInterval={6000}
+  autoCycle={true}
+/>
+```
+
+**Props:**
+- `heading`: Section heading text
+- `items`: JSON string array of accordion items (title, description, imageUrl, imageAlt)
+- `cycleInterval`: Auto-cycle interval in milliseconds (default: 6000)
+- `autoCycle`: Enable/disable auto-cycling (default: true)
+
+**CtaSection**
+- Call-to-action section with illustration and decorative background
+- Styled to match the affinda.com design
+
+```tsx
+import { CtaSection } from '@affinda/react';
+import { getIllustrationUrlByScene } from '@affinda/illustrations';
+
+<CtaSection
+  heading="See what our AI agents can do for you"
+  description="Upload your documents and watch our AI agents get to work."
+  primaryButtonText="Try for free"
+  primaryButtonUrl="https://app.affinda.com/auth/register"
+  secondaryButtonText="Talk to us"
+  secondaryButtonUrl="/contact"
+  illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+/>
+```
+
+**Props:**
+- `heading`: Section heading text
+- `description`: Description text below heading
+- `primaryButtonText`: Text for primary CTA button
+- `primaryButtonUrl`: URL for primary button
+- `secondaryButtonText`: Text for secondary button
+- `secondaryButtonUrl`: URL for secondary button
+- `illustrationUrl`: URL to illustration image (use @affinda/illustrations)
+
 #### Social Proof & Testimonials
 
 **Testimonial**
@@ -682,10 +752,29 @@ When generating Affinda UI code:
 
 4. **Never use purple colors** - those were placeholder colors and have been removed
 
+## Using Illustrations
+
+The `@affinda/illustrations` package provides themed illustration assets:
+
+```tsx
+import { getIllustrationUrlByScene } from '@affinda/illustrations';
+
+// Available scenes: 'document-raise', 'thinking', 'shapes', 'team-leader', 
+// 'grow-business', 'document-type', 'industries', 'accuracy', 'intelligence', 
+// 'page-turn', 'automate'
+
+// Available themes: 'white-ivory', 'mist-green', 'soft-clay', 'inkwell'
+
+<img 
+  src={getIllustrationUrlByScene('automate', 'inkwell')} 
+  alt="Automation illustration" 
+/>
+```
+
 ## Related Packages
 
 - **@affinda/wc** - Core web components (used internally)
 - **@affinda/tokens** - Design tokens (colors, spacing, typography)
 - **@affinda/icons** - Icon library
-- **@affinda/illustrations** - Illustration assets
+- **@affinda/illustrations** - Illustration assets (install separately: `npm install @affinda/illustrations`)
 - **@affinda/css** - Base CSS styles

package/dist/components/PaperclipDecoration.d.ts

@@ -1,8 +1,22 @@
+import * as React from 'react';
 export interface PaperclipDecorationProps {
     className?: string;
-    style?: Record<string, any>;
+    style?: React.CSSProperties;
+    /** Slot name for use inside web components like HeroSection */
+    slot?: string;
 }
 /**
- * Decorative paperclip vector graphic for hero sections
+ * Decorative paperclip vector graphic for hero sections.
+ *
+ * When used inside HeroSection, pass slot="decoration" and position with style:
+ *
+ * @example
+ * <HeroSection variant="dark" withDecoration={true}>
+ *   <PaperclipDecoration
+ *     slot="decoration"
+ *     style={{ position: 'absolute', bottom: -80, right: -800 }}
+ *   />
+ *   <Heading>...</Heading>
+ * </HeroSection>
  */
-export declare function PaperclipDecoration({ className, style }: PaperclipDecorationProps): any;
+export declare function PaperclipDecoration({ className, style, slot }: PaperclipDecorationProps): any;

package/dist/components/PaperclipDecoration.js

@@ -2,9 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-nocheck
 import * as React from 'react';
 /**
- * Decorative paperclip vector graphic for hero sections
+ * Decorative paperclip vector graphic for hero sections.
+ *
+ * When used inside HeroSection, pass slot="decoration" and position with style:
+ *
+ * @example
+ * <HeroSection variant="dark" withDecoration={true}>
+ *   <PaperclipDecoration
+ *     slot="decoration"
+ *     style={{ position: 'absolute', bottom: -80, right: -800 }}
+ *   />
+ *   <Heading>...</Heading>
+ * </HeroSection>
  */
-export function PaperclipDecoration({ className, style }) {
-    const svgStyle = Object.assign({ display: 'block', position: 'absolute' }, style || {});
-    return (_jsx("svg", { preserveAspectRatio: "none", width: "100%", height: "100%", style: style, viewBox: "0 0 1212 753", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": true, children: _jsx("path", { d: "M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z", fill: "white", fillOpacity: 0.06 }) }));
+export function PaperclipDecoration({ className, style, slot }) {
+    return (_jsx("svg", { preserveAspectRatio: "none", width: "100%", height: "100%", style: style, viewBox: "0 0 1212 753", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": true, slot: slot, children: _jsx("path", { d: "M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z", fill: "white", fillOpacity: 0.06 }) }));
 }

package/dist/generated/components.d.ts

@@ -9,6 +9,8 @@ import { AfCard as AfCardElement } from "@affinda/wc/dist/components/af-card.js"
 import { AfClientCarousel as AfClientCarouselElement } from "@affinda/wc/dist/components/af-client-carousel.js";
 import { AfColorSwatch as AfColorSwatchElement } from "@affinda/wc/dist/components/af-color-swatch.js";
 import { AfContainer as AfContainerElement } from "@affinda/wc/dist/components/af-container.js";
+import { AfCtaSection as AfCtaSectionElement } from "@affinda/wc/dist/components/af-cta-section.js";
+import { AfFeatureAccordion as AfFeatureAccordionElement } from "@affinda/wc/dist/components/af-feature-accordion.js";
 import { AfHeading as AfHeadingElement } from "@affinda/wc/dist/components/af-heading.js";
 import { AfHeroSection as AfHeroSectionElement } from "@affinda/wc/dist/components/af-hero-section.js";
 import { AfIconButton as AfIconButtonElement } from "@affinda/wc/dist/components/af-icon-button.js";
@@ -37,6 +39,10 @@ export type AfColorSwatchEvents = NonNullable<unknown>;
 export declare const AfColorSwatch: StencilReactComponent<AfColorSwatchElement, AfColorSwatchEvents>;
 export type AfContainerEvents = NonNullable<unknown>;
 export declare const AfContainer: StencilReactComponent<AfContainerElement, AfContainerEvents>;
+export type AfCtaSectionEvents = NonNullable<unknown>;
+export declare const AfCtaSection: StencilReactComponent<AfCtaSectionElement, AfCtaSectionEvents>;
+export type AfFeatureAccordionEvents = NonNullable<unknown>;
+export declare const AfFeatureAccordion: StencilReactComponent<AfFeatureAccordionElement, AfFeatureAccordionEvents>;
 export type AfHeadingEvents = NonNullable<unknown>;
 export declare const AfHeading: StencilReactComponent<AfHeadingElement, AfHeadingEvents>;
 export type AfHeroSectionEvents = NonNullable<unknown>;

package/dist/generated/components.js

@@ -11,6 +11,8 @@ import { AfCard as AfCardElement, defineCustomElement as defineAfCard } from "@a
 import { AfClientCarousel as AfClientCarouselElement, defineCustomElement as defineAfClientCarousel } from "@affinda/wc/dist/components/af-client-carousel.js";
 import { AfColorSwatch as AfColorSwatchElement, defineCustomElement as defineAfColorSwatch } from "@affinda/wc/dist/components/af-color-swatch.js";
 import { AfContainer as AfContainerElement, defineCustomElement as defineAfContainer } from "@affinda/wc/dist/components/af-container.js";
+import { AfCtaSection as AfCtaSectionElement, defineCustomElement as defineAfCtaSection } from "@affinda/wc/dist/components/af-cta-section.js";
+import { AfFeatureAccordion as AfFeatureAccordionElement, defineCustomElement as defineAfFeatureAccordion } from "@affinda/wc/dist/components/af-feature-accordion.js";
 import { AfHeading as AfHeadingElement, defineCustomElement as defineAfHeading } from "@affinda/wc/dist/components/af-heading.js";
 import { AfHeroSection as AfHeroSectionElement, defineCustomElement as defineAfHeroSection } from "@affinda/wc/dist/components/af-hero-section.js";
 import { AfIconButton as AfIconButtonElement, defineCustomElement as defineAfIconButton } from "@affinda/wc/dist/components/af-icon-button.js";
@@ -82,6 +84,22 @@ export const AfContainer = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfContainer
 });
+export const AfCtaSection = /*@__PURE__*/ createComponent({
+    tagName: 'af-cta-section',
+    elementClass: AfCtaSectionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfCtaSection
+});
+export const AfFeatureAccordion = /*@__PURE__*/ createComponent({
+    tagName: 'af-feature-accordion',
+    elementClass: AfFeatureAccordionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfFeatureAccordion
+});
 export const AfHeading = /*@__PURE__*/ createComponent({
     tagName: 'af-heading',
     elementClass: AfHeadingElement,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './generated/components.js';
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 export * from '@affinda/icons/react';
 export { PaperclipDecoration } from './components/PaperclipDecoration';

package/dist/index.js

@@ -2,7 +2,7 @@
 export * from './generated/components.js';
 // Note: defineCustomElements should be imported directly from @affinda/wc/loader/index.js in your app
 // Re-export components without the 'Af' prefix for cleaner React usage
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 // Re-export React icon components from icons package
 export * from '@affinda/icons/react';
 // Export custom React components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "private": false,
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@affinda/icons": "^0.0.3",
-    "@affinda/wc": "^0.0.7",
+    "@affinda/wc": "^0.0.12",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {