@affinda/react 0.0.24 → 0.0.26

package/dist/components/NumberBadge.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type NumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export type NumberBadgeVariant = 'inCircle' | 'outlined';
+export interface NumberBadgeProps {
+    /** The number to display (1-10) */
+    number: NumberBadgeNumber;
+    /** Visual variant - inCircle shows filled badge, outlined shows just the number */
+    variant?: NumberBadgeVariant;
+    /** Size of the badge in pixels */
+    size?: number;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+ * Perfect for numbered lists, step indicators, or ordered content.
+ */
+export declare const NumberBadge: React.ForwardRefExoticComponent<NumberBadgeProps & React.RefAttributes<HTMLElement>>;

package/dist/components/NumberBadge.js

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+ * Perfect for numbered lists, step indicators, or ordered content.
+ */
+export const NumberBadge = React.forwardRef(({ number, variant = 'inCircle', size = 48, className, style, ...props }, ref) => {
+    return React.createElement('af-number-badge', {
+        ref,
+        number,
+        variant,
+        size,
+        class: className,
+        style,
+        ...props,
+    });
+});
+NumberBadge.displayName = 'NumberBadge';

package/dist/components/PaperclipDecoration.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-nocheck
-import * as React from 'react';
 /**
  * Decorative paperclip vector graphic for hero sections.
  *

package/dist/components/Tab.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export type TabShape = 'square' | 'pill';
+export interface TabProps {
+    /** The text label for the tab */
+    label: string;
+    /** Whether the tab is currently active/selected */
+    active?: boolean;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Visual shape variant */
+    shape?: TabShape;
+    /** Whether to show the icon slot */
+    displayIcon?: boolean;
+    /** Whether to show the number badge slot */
+    displayNumber?: boolean;
+    /** Unique value for the tab, used for programmatic selection */
+    value?: string;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Tab click handler */
+    onAfTabClick?: (event: CustomEvent<{
+        value?: string;
+    }>) => void;
+    /** Children (for icon and number slots) */
+    children?: React.ReactNode;
+}
+/**
+ * Tab component for use within a TabBar.
+ * Represents an individual selectable tab with support for icons and number badges.
+ */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Tab.js

@@ -0,0 +1,32 @@
+import React from 'react';
+/**
+ * Tab component for use within a TabBar.
+ * Represents an individual selectable tab with support for icons and number badges.
+ */
+export const Tab = React.forwardRef(({ label, active, disabled, shape, displayIcon, displayNumber, value, className, style, onAfTabClick, children, ...props }, ref) => {
+    const tabRef = React.useRef(null);
+    React.useEffect(() => {
+        const el = tabRef.current;
+        if (el && onAfTabClick) {
+            const handler = (e) => onAfTabClick(e);
+            el.addEventListener('afTabClick', handler);
+            return () => el.removeEventListener('afTabClick', handler);
+        }
+    }, [onAfTabClick]);
+    // Merge refs
+    React.useImperativeHandle(ref, () => tabRef.current);
+    return React.createElement('af-tab', {
+        ref: tabRef,
+        label,
+        active,
+        disabled,
+        shape,
+        'display-icon': displayIcon,
+        'display-number': displayNumber,
+        value,
+        class: className,
+        style,
+        ...props,
+    }, children);
+});
+Tab.displayName = 'Tab';

package/dist/components/TabBar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type TabBarShape = 'square' | 'pill';
+export type TabBarBreakpoint = 'mobile' | 'desktop';
+export interface TabBarProps {
+    /** Visual shape variant for all tabs */
+    shape?: TabBarShape;
+    /** Responsive breakpoint mode */
+    breakpoint?: TabBarBreakpoint;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Tab elements */
+    children?: React.ReactNode;
+}
+/**
+ * TabBar component that contains and manages a group of tabs.
+ * Provides horizontal layout, keyboard navigation, and consistent styling.
+ */
+export declare const TabBar: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/TabBar.js

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * TabBar component that contains and manages a group of tabs.
+ * Provides horizontal layout, keyboard navigation, and consistent styling.
+ */
+export const TabBar = React.forwardRef(({ shape, breakpoint, className, style, children, ...props }, ref) => {
+    return React.createElement('af-tab-bar', {
+        ref,
+        shape,
+        breakpoint,
+        class: className,
+        style,
+        ...props,
+    }, children);
+});
+TabBar.displayName = 'TabBar';

package/dist/generated/components.d.ts

@@ -6,30 +6,56 @@ import { AfAspectRatio as AfAspectRatioElement } from "@affinda/wc/dist/componen
 import { AfButtonGroup as AfButtonGroupElement } from "@affinda/wc/dist/components/af-button-group.js";
 import { AfButton as AfButtonElement } from "@affinda/wc/dist/components/af-button.js";
 import { AfCard as AfCardElement } from "@affinda/wc/dist/components/af-card.js";
+import { AfCheckbox as AfCheckboxElement } from "@affinda/wc/dist/components/af-checkbox.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 { AfContactItem as AfContactItemElement } from "@affinda/wc/dist/components/af-contact-item.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 { AfFeatureCard as AfFeatureCardElement } from "@affinda/wc/dist/components/af-feature-card.js";
+import { AfFeatureGrid as AfFeatureGridElement } from "@affinda/wc/dist/components/af-feature-grid.js";
+import { AfFieldset as AfFieldsetElement } from "@affinda/wc/dist/components/af-fieldset.js";
 import { AfFooterColumn as AfFooterColumnElement } from "@affinda/wc/dist/components/af-footer-column.js";
 import { AfFooterLink as AfFooterLinkElement } from "@affinda/wc/dist/components/af-footer-link.js";
 import { AfFooter as AfFooterElement } from "@affinda/wc/dist/components/af-footer.js";
+import { AfGridCallout as AfGridCalloutElement } from "@affinda/wc/dist/components/af-grid-callout.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 { AfIconBox as AfIconBoxElement } from "@affinda/wc/dist/components/af-icon-box.js";
 import { AfIconButton as AfIconButtonElement } from "@affinda/wc/dist/components/af-icon-button.js";
+import { AfIconText as AfIconTextElement } from "@affinda/wc/dist/components/af-icon-text.js";
+import { AfIcon as AfIconElement } from "@affinda/wc/dist/components/af-icon.js";
+import { AfIllustratedCard as AfIllustratedCardElement } from "@affinda/wc/dist/components/af-illustrated-card.js";
+import { AfImage as AfImageElement } from "@affinda/wc/dist/components/af-image.js";
+import { AfInPageBanner as AfInPageBannerElement } from "@affinda/wc/dist/components/af-in-page-banner.js";
+import { AfInput as AfInputElement } from "@affinda/wc/dist/components/af-input.js";
 import { AfLogoWell as AfLogoWellElement } from "@affinda/wc/dist/components/af-logo-well.js";
 import { AfLogo as AfLogoElement } from "@affinda/wc/dist/components/af-logo.js";
+import { AfNavCard as AfNavCardElement } from "@affinda/wc/dist/components/af-nav-card.js";
 import { AfNavItem as AfNavItemElement } from "@affinda/wc/dist/components/af-nav-item.js";
+import { AfNavMenuNest as AfNavMenuNestElement } from "@affinda/wc/dist/components/af-nav-menu-nest.js";
+import { AfNavMenu as AfNavMenuElement } from "@affinda/wc/dist/components/af-nav-menu.js";
 import { AfNavbar as AfNavbarElement } from "@affinda/wc/dist/components/af-navbar.js";
+import { AfNumberBadge as AfNumberBadgeElement } from "@affinda/wc/dist/components/af-number-badge.js";
+import { AfProgressLine as AfProgressLineElement } from "@affinda/wc/dist/components/af-progress-line.js";
+import { AfRadio as AfRadioElement } from "@affinda/wc/dist/components/af-radio.js";
 import { AfSection as AfSectionElement } from "@affinda/wc/dist/components/af-section.js";
 import { AfSocialLink as AfSocialLinkElement } from "@affinda/wc/dist/components/af-social-link.js";
+import { AfSplitSection as AfSplitSectionElement } from "@affinda/wc/dist/components/af-split-section.js";
+import { AfSwitch as AfSwitchElement } from "@affinda/wc/dist/components/af-switch.js";
+import { AfTabBar as AfTabBarElement } from "@affinda/wc/dist/components/af-tab-bar.js";
+import { AfTab as AfTabElement } from "@affinda/wc/dist/components/af-tab.js";
+import { AfTag as AfTagElement } from "@affinda/wc/dist/components/af-tag.js";
 import { AfTestimonialCarousel as AfTestimonialCarouselElement } from "@affinda/wc/dist/components/af-testimonial-carousel.js";
 import { AfTestimonialStat as AfTestimonialStatElement } from "@affinda/wc/dist/components/af-testimonial-stat.js";
 import { AfTestimonial as AfTestimonialElement } from "@affinda/wc/dist/components/af-testimonial.js";
+import { AfTextImageNest as AfTextImageNestElement } from "@affinda/wc/dist/components/af-text-image-nest.js";
+import { AfTextImage as AfTextImageElement } from "@affinda/wc/dist/components/af-text-image.js";
 import { AfText as AfTextElement } from "@affinda/wc/dist/components/af-text.js";
+import { AfTextarea as AfTextareaElement } from "@affinda/wc/dist/components/af-textarea.js";
 import { AfTypographyLockup as AfTypographyLockupElement } from "@affinda/wc/dist/components/af-typography-lockup.js";
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { AfVideoContainer as AfVideoContainerElement } from "@affinda/wc/dist/components/af-video-container.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 export type AfAspectRatioEvents = NonNullable<unknown>;
 export declare const AfAspectRatio: StencilReactComponent<AfAspectRatioElement, AfAspectRatioEvents>;
 export type AfButtonEvents = NonNullable<unknown>;
@@ -38,6 +64,12 @@ export type AfButtonGroupEvents = NonNullable<unknown>;
 export declare const AfButtonGroup: StencilReactComponent<AfButtonGroupElement, AfButtonGroupEvents>;
 export type AfCardEvents = NonNullable<unknown>;
 export declare const AfCard: StencilReactComponent<AfCardElement, AfCardEvents>;
+export type AfCheckboxEvents = {
+    onAfChange: EventName<CustomEvent<{
+        checked: boolean;
+    }>>;
+};
+export declare const AfCheckbox: StencilReactComponent<AfCheckboxElement, AfCheckboxEvents>;
 export type AfClientCarouselEvents = NonNullable<unknown>;
 export declare const AfClientCarousel: StencilReactComponent<AfClientCarouselElement, AfClientCarouselEvents>;
 export type AfColorSwatchEvents = NonNullable<unknown>;
@@ -46,35 +78,101 @@ export type AfContactItemEvents = NonNullable<unknown>;
 export declare const AfContactItem: StencilReactComponent<AfContactItemElement, AfContactItemEvents>;
 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 AfFeatureCardEvents = NonNullable<unknown>;
+export declare const AfFeatureCard: StencilReactComponent<AfFeatureCardElement, AfFeatureCardEvents>;
+export type AfFeatureGridEvents = NonNullable<unknown>;
+export declare const AfFeatureGrid: StencilReactComponent<AfFeatureGridElement, AfFeatureGridEvents>;
+export type AfFieldsetEvents = NonNullable<unknown>;
+export declare const AfFieldset: StencilReactComponent<AfFieldsetElement, AfFieldsetEvents>;
 export type AfFooterEvents = NonNullable<unknown>;
 export declare const AfFooter: StencilReactComponent<AfFooterElement, AfFooterEvents>;
 export type AfFooterColumnEvents = NonNullable<unknown>;
 export declare const AfFooterColumn: StencilReactComponent<AfFooterColumnElement, AfFooterColumnEvents>;
 export type AfFooterLinkEvents = NonNullable<unknown>;
 export declare const AfFooterLink: StencilReactComponent<AfFooterLinkElement, AfFooterLinkEvents>;
+export type AfGridCalloutEvents = NonNullable<unknown>;
+export declare const AfGridCallout: StencilReactComponent<AfGridCalloutElement, AfGridCalloutEvents>;
 export type AfHeadingEvents = NonNullable<unknown>;
 export declare const AfHeading: StencilReactComponent<AfHeadingElement, AfHeadingEvents>;
 export type AfHeroSectionEvents = NonNullable<unknown>;
 export declare const AfHeroSection: StencilReactComponent<AfHeroSectionElement, AfHeroSectionEvents>;
+export type AfIconEvents = NonNullable<unknown>;
+export declare const AfIcon: StencilReactComponent<AfIconElement, AfIconEvents>;
+export type AfIconBoxEvents = NonNullable<unknown>;
+export declare const AfIconBox: StencilReactComponent<AfIconBoxElement, AfIconBoxEvents>;
 export type AfIconButtonEvents = NonNullable<unknown>;
 export declare const AfIconButton: StencilReactComponent<AfIconButtonElement, AfIconButtonEvents>;
+export type AfIconTextEvents = NonNullable<unknown>;
+export declare const AfIconText: StencilReactComponent<AfIconTextElement, AfIconTextEvents>;
+export type AfIllustratedCardEvents = NonNullable<unknown>;
+export declare const AfIllustratedCard: StencilReactComponent<AfIllustratedCardElement, AfIllustratedCardEvents>;
+export type AfImageEvents = NonNullable<unknown>;
+export declare const AfImage: StencilReactComponent<AfImageElement, AfImageEvents>;
+export type AfInPageBannerEvents = NonNullable<unknown>;
+export declare const AfInPageBanner: StencilReactComponent<AfInPageBannerElement, AfInPageBannerEvents>;
+export type AfInputEvents = {
+    onAfInput: EventName<CustomEvent<{
+        value: string;
+    }>>;
+    onAfBlur: EventName<CustomEvent<void>>;
+    onAfFocus: EventName<CustomEvent<void>>;
+    onAfClear: EventName<CustomEvent<void>>;
+    onAfInfoClick: EventName<CustomEvent<void>>;
+};
+export declare const AfInput: StencilReactComponent<AfInputElement, AfInputEvents>;
 export type AfLogoEvents = NonNullable<unknown>;
 export declare const AfLogo: StencilReactComponent<AfLogoElement, AfLogoEvents>;
 export type AfLogoWellEvents = NonNullable<unknown>;
 export declare const AfLogoWell: StencilReactComponent<AfLogoWellElement, AfLogoWellEvents>;
+export type AfNavCardEvents = NonNullable<unknown>;
+export declare const AfNavCard: StencilReactComponent<AfNavCardElement, AfNavCardEvents>;
 export type AfNavItemEvents = NonNullable<unknown>;
 export declare const AfNavItem: StencilReactComponent<AfNavItemElement, AfNavItemEvents>;
+export type AfNavMenuEvents = NonNullable<unknown>;
+export declare const AfNavMenu: StencilReactComponent<AfNavMenuElement, AfNavMenuEvents>;
+export type AfNavMenuNestEvents = NonNullable<unknown>;
+export declare const AfNavMenuNest: StencilReactComponent<AfNavMenuNestElement, AfNavMenuNestEvents>;
 export type AfNavbarEvents = NonNullable<unknown>;
 export declare const AfNavbar: StencilReactComponent<AfNavbarElement, AfNavbarEvents>;
+export type AfNumberBadgeEvents = NonNullable<unknown>;
+export declare const AfNumberBadge: StencilReactComponent<AfNumberBadgeElement, AfNumberBadgeEvents>;
+export type AfProgressLineEvents = NonNullable<unknown>;
+export declare const AfProgressLine: StencilReactComponent<AfProgressLineElement, AfProgressLineEvents>;
+export type AfRadioEvents = {
+    onAfChange: EventName<CustomEvent<{
+        checked: boolean;
+        value?: string;
+    }>>;
+};
+export declare const AfRadio: StencilReactComponent<AfRadioElement, AfRadioEvents>;
 export type AfSectionEvents = NonNullable<unknown>;
 export declare const AfSection: StencilReactComponent<AfSectionElement, AfSectionEvents>;
 export type AfSocialLinkEvents = NonNullable<unknown>;
 export declare const AfSocialLink: StencilReactComponent<AfSocialLinkElement, AfSocialLinkEvents>;
-export type AfTestimonialEvents = NonNullable<unknown>;
+export type AfSplitSectionEvents = NonNullable<unknown>;
+export declare const AfSplitSection: StencilReactComponent<AfSplitSectionElement, AfSplitSectionEvents>;
+export type AfSwitchEvents = {
+    onAfChange: EventName<CustomEvent<{
+        active: boolean;
+    }>>;
+};
+export declare const AfSwitch: StencilReactComponent<AfSwitchElement, AfSwitchEvents>;
+export type AfTabEvents = {
+    onAfTabClick: EventName<CustomEvent<{
+        value?: string;
+    }>>;
+};
+export declare const AfTab: StencilReactComponent<AfTabElement, AfTabEvents>;
+export type AfTabBarEvents = NonNullable<unknown>;
+export declare const AfTabBar: StencilReactComponent<AfTabBarElement, AfTabBarEvents>;
+export type AfTagEvents = NonNullable<unknown>;
+export declare const AfTag: StencilReactComponent<AfTagElement, AfTagEvents>;
+export type AfTestimonialEvents = {
+    onNavPrev: EventName<CustomEvent<void>>;
+    onNavNext: EventName<CustomEvent<void>>;
+};
 export declare const AfTestimonial: StencilReactComponent<AfTestimonialElement, AfTestimonialEvents>;
 export type AfTestimonialCarouselEvents = NonNullable<unknown>;
 export declare const AfTestimonialCarousel: StencilReactComponent<AfTestimonialCarouselElement, AfTestimonialCarouselEvents>;
@@ -82,5 +180,24 @@ export type AfTestimonialStatEvents = NonNullable<unknown>;
 export declare const AfTestimonialStat: StencilReactComponent<AfTestimonialStatElement, AfTestimonialStatEvents>;
 export type AfTextEvents = NonNullable<unknown>;
 export declare const AfText: StencilReactComponent<AfTextElement, AfTextEvents>;
+export type AfTextImageEvents = NonNullable<unknown>;
+export declare const AfTextImage: StencilReactComponent<AfTextImageElement, AfTextImageEvents>;
+export type AfTextImageNestEvents = NonNullable<unknown>;
+export declare const AfTextImageNest: StencilReactComponent<AfTextImageNestElement, AfTextImageNestEvents>;
+export type AfTextareaEvents = {
+    onAfInput: EventName<CustomEvent<{
+        value: string;
+    }>>;
+    onAfBlur: EventName<CustomEvent<void>>;
+    onAfFocus: EventName<CustomEvent<void>>;
+    onAfInfoClick: EventName<CustomEvent<void>>;
+};
+export declare const AfTextarea: StencilReactComponent<AfTextareaElement, AfTextareaEvents>;
 export type AfTypographyLockupEvents = NonNullable<unknown>;
 export declare const AfTypographyLockup: StencilReactComponent<AfTypographyLockupElement, AfTypographyLockupEvents>;
+export type AfVideoContainerEvents = {
+    onPlayClick: EventName<CustomEvent<{
+        videoUrl: string;
+    }>>;
+};
+export declare const AfVideoContainer: StencilReactComponent<AfVideoContainerElement, AfVideoContainerEvents>;