@affinda/react 0.0.26 → 0.0.28

package/dist/components/AfAccordionTrigger.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface AfAccordionTriggerProps {
+    /** Trigger content */
+    children: React.ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfAccordionTrigger provides the clickable header content for an AfAccordionItem.
+ * It automatically applies the `slot="trigger"` attribute required by the accordion.
+ *
+ * @example
+ * ```tsx
+ * <AfAccordionItem itemId="item-1">
+ *   <AfAccordionTrigger>What is document processing?</AfAccordionTrigger>
+ *   <AfText>Answer text here...</AfText>
+ * </AfAccordionItem>
+ * ```
+ */
+export declare const AfAccordionTrigger: React.ForwardRefExoticComponent<AfAccordionTriggerProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/AfAccordionTrigger.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+/**
+ * AfAccordionTrigger provides the clickable header content for an AfAccordionItem.
+ * It automatically applies the `slot="trigger"` attribute required by the accordion.
+ *
+ * @example
+ * ```tsx
+ * <AfAccordionItem itemId="item-1">
+ *   <AfAccordionTrigger>What is document processing?</AfAccordionTrigger>
+ *   <AfText>Answer text here...</AfText>
+ * </AfAccordionItem>
+ * ```
+ */
+export const AfAccordionTrigger = React.forwardRef(({ children, className, style, ...props }, ref) => {
+    return (_jsx("span", { ref: ref, slot: "trigger", className: className, style: style, ...props, children: children }));
+});
+AfAccordionTrigger.displayName = 'AfAccordionTrigger';

package/dist/components/AfAlert.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type AfAlertVariant = 'info' | 'success' | 'warning' | 'error';
+export interface AfAlertProps {
+    /** Alert message content */
+    children: React.ReactNode;
+    /** Alert variant */
+    variant?: AfAlertVariant;
+    /** Alert title */
+    title?: string;
+    /** Whether the alert can be dismissed */
+    dismissible?: boolean;
+    /** Callback when alert is dismissed */
+    onDismiss?: () => void;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfAlert - Draft inline alert/banner component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfAlert: React.FC<AfAlertProps>;

package/dist/components/AfAlert.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AfAlert - Draft inline alert/banner component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfAlert = ({ children, variant = 'info', title, dismissible = false, onDismiss, style, }) => {
+    const variantStyles = {
+        info: {
+            bg: 'var(--colour-tints-mist-green-100, #e8f0ee)',
+            border: 'var(--colour-brand-mist-green, #c6d5d1)',
+            iconColor: 'var(--colour-brand-inkwell, #14343b)',
+        },
+        success: {
+            bg: 'var(--colour-tints-mist-green-100, #e8f0ee)',
+            border: 'var(--colour-brand-azure, #7fe2d4)',
+            iconColor: '#059669',
+        },
+        warning: {
+            bg: 'var(--colour-tints-softclay-100, #f5efe6)',
+            border: 'var(--colour-brand-soft-clay, #b09670)',
+            iconColor: '#d97706',
+        },
+        error: {
+            bg: '#fef2f2',
+            border: '#fca5a5',
+            iconColor: '#dc2626',
+        },
+    };
+    const icons = {
+        info: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M12 16V12M12 8H12.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
+        success: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M8 12L11 15L16 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })),
+        warning: (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 9V13M12 17H12.01M12 3L2 21H22L12 3Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+        error: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M15 9L9 15M9 9L15 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
+    };
+    const currentVariant = variantStyles[variant];
+    const alertStyles = {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '12px',
+        padding: '16px',
+        background: currentVariant.bg,
+        border: `1px solid ${currentVariant.border}`,
+        borderRadius: '8px',
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        fontSize: '14px',
+        color: 'var(--colour-brand-inkwell, #14343b)',
+        ...style,
+    };
+    const iconStyles = {
+        flexShrink: 0,
+        color: currentVariant.iconColor,
+    };
+    const closeButtonStyles = {
+        marginLeft: 'auto',
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'var(--colour-tints-inkwell-400, #7a8a8d)',
+        flexShrink: 0,
+    };
+    return (_jsxs("div", { style: alertStyles, role: "alert", children: [_jsx("span", { style: iconStyles, children: icons[variant] }), _jsxs("div", { style: { flex: 1 }, children: [title && _jsx("div", { style: { fontWeight: 600, marginBottom: '4px' }, children: title }), _jsx("div", { children: children })] }), dismissible && (_jsx("button", { type: "button", onClick: onDismiss, style: closeButtonStyles, "aria-label": "Dismiss", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
+};

package/dist/components/AfAvatar.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface AfAvatarProps {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Fallback initials when no image is provided */
+    initials?: string;
+    /** Size of the avatar */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether to show a status indicator */
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfAvatar - Draft avatar component for user images.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfAvatar: React.FC<AfAvatarProps>;

package/dist/components/AfAvatar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AfAvatar - Draft avatar component for user images.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfAvatar = ({ src, alt = 'Avatar', initials, size = 'medium', status, style, }) => {
+    const sizeMap = {
+        small: 32,
+        medium: 40,
+        large: 56,
+    };
+    const dimension = sizeMap[size];
+    const fontSize = size === 'small' ? 12 : size === 'large' ? 20 : 14;
+    const statusColors = {
+        online: '#22c55e',
+        offline: '#9ca3af',
+        busy: '#ef4444',
+        away: '#f59e0b',
+    };
+    const avatarStyles = {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: dimension,
+        height: dimension,
+        borderRadius: '50%',
+        flexShrink: 0,
+        ...style,
+    };
+    const contentStyles = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        background: 'var(--colour-brand-mist-green, #c6d5d1)',
+        color: 'var(--colour-brand-inkwell, #14343b)',
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        fontSize,
+        fontWeight: 600,
+        overflow: 'hidden',
+    };
+    const imageStyles = {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+    };
+    const statusStyles = {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: size === 'small' ? 8 : size === 'large' ? 14 : 10,
+        height: size === 'small' ? 8 : size === 'large' ? 14 : 10,
+        borderRadius: '50%',
+        background: status ? statusColors[status] : 'transparent',
+        border: '2px solid var(--colour-background-white, #fff)',
+    };
+    return (_jsxs("div", { style: avatarStyles, children: [_jsx("div", { style: contentStyles, children: src ? (_jsx("img", { src: src, alt: alt, style: imageStyles })) : (_jsx("span", { children: initials || alt.charAt(0).toUpperCase() })) }), status && _jsx("div", { style: statusStyles, "aria-label": `Status: ${status}` })] }));
+};

package/dist/components/AfBreadcrumb.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface AfBreadcrumbItem {
+    /** Label to display */
+    label: string;
+    /** URL to link to (optional for last item) */
+    href?: string;
+}
+export interface AfBreadcrumbProps {
+    /** Array of breadcrumb items */
+    items: AfBreadcrumbItem[];
+    /** Separator between items */
+    separator?: React.ReactNode;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfBreadcrumb - Draft breadcrumb navigation component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfBreadcrumb: React.FC<AfBreadcrumbProps>;

package/dist/components/AfBreadcrumb.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AfBreadcrumb - Draft breadcrumb navigation component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfBreadcrumb = ({ items, separator = '/', style, }) => {
+    const containerStyles = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        fontSize: '14px',
+        ...style,
+    };
+    const linkStyles = {
+        color: 'var(--af-typography-body-subtle, #a1aeb1)',
+        textDecoration: 'none',
+        transition: 'color 0.15s ease',
+    };
+    const activeStyles = {
+        color: 'var(--af-typography-body-dark, #14343b)',
+        fontWeight: 500,
+    };
+    const separatorStyles = {
+        color: 'var(--af-typography-body-subtle, #a1aeb1)',
+    };
+    return (_jsx("nav", { "aria-label": "Breadcrumb", style: containerStyles, children: _jsx("ol", { style: { display: 'flex', alignItems: 'center', gap: '8px', margin: 0, padding: 0, listStyle: 'none' }, children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (_jsxs("li", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [item.href && !isLast ? (_jsx("a", { href: item.href, style: linkStyles, onMouseEnter: (e) => e.currentTarget.style.color = 'var(--af-typography-body-dark, #14343b)', onMouseLeave: (e) => e.currentTarget.style.color = 'var(--af-typography-body-subtle, #a1aeb1)', children: item.label })) : (_jsx("span", { style: isLast ? activeStyles : linkStyles, "aria-current": isLast ? 'page' : undefined, children: item.label })), !isLast && _jsx("span", { style: separatorStyles, "aria-hidden": "true", children: separator })] }, index));
+            }) }) }));
+};

package/dist/components/AfLink.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface AfLinkProps {
+    /** Link destination */
+    href: string;
+    /** Link content */
+    children: React.ReactNode;
+    /** Whether to open in a new tab */
+    external?: boolean;
+    /** Link variant */
+    variant?: 'default' | 'subtle';
+    /** Whether to show an external link icon */
+    showExternalIcon?: boolean;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfLink - Draft styled link component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfLink: React.FC<AfLinkProps>;

package/dist/components/AfLink.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AfLink - Draft styled link component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfLink = ({ href, children, external = false, variant = 'default', showExternalIcon = true, style, }) => {
+    // Use the same theme-aware color variables as NavItem
+    const defaultColor = 'var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))';
+    const subtleColor = 'var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))';
+    const linkStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        color: variant === 'default' ? defaultColor : subtleColor,
+        textDecoration: variant === 'default' ? 'underline' : 'none',
+        textDecorationColor: 'currentColor',
+        textUnderlineOffset: '2px',
+        transition: 'opacity 0.15s ease',
+        cursor: 'pointer',
+        ...style,
+    };
+    const externalIcon = (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: [_jsx("path", { d: "M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M15 3H21V9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10 14L21 3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    return (_jsxs("a", { href: href, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, style: linkStyles, onMouseEnter: (e) => {
+            e.currentTarget.style.opacity = '0.7';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.opacity = '1';
+        }, children: [children, external && showExternalIcon && externalIcon] }));
+};

package/dist/components/AfMarketingNavbar.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'af-nav-accordion': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                mode?: 'independent' | 'exclusive';
+                breakpoint?: 'desktop' | 'mobile';
+                slot?: string;
+            }, HTMLElement>;
+            'af-nav-accordion-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
+                'item-id'?: string;
+                label?: string;
+                open?: boolean;
+                disabled?: boolean;
+                breakpoint?: 'desktop' | 'mobile';
+                slot?: string;
+            }, HTMLElement>;
+        }
+    }
+}
+export interface AfMarketingNavbarProps {
+    /** Theme for the spacer background */
+    theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Callback when "Try for free" is clicked */
+    onCtaClick?: () => void;
+    /** URL for the CTA button (if using as link instead of button) */
+    ctaHref?: string;
+    /** Custom CTA button text */
+    ctaText?: string;
+    /** Force mobile layout regardless of viewport (useful for testing) */
+    forceMobile?: boolean;
+}
+/**
+ * Pre-configured navigation bar matching the Affinda marketing website (affinda.com).
+ *
+ * Includes:
+ * - Platform, Solutions, Pricing, Resources, Enterprise navigation links
+ * - Solutions mega-menu dropdown with Industries, Use Cases, Documents, Resume Parser
+ * - Resources mega-menu dropdown with Resource Hub, Documentation, About
+ * - "Talk to us" and "Log in" utility links
+ * - "Try for free" CTA button
+ * - Mobile menu with direct links and accordions matching affinda.com behavior
+ *
+ * @example
+ * ```tsx
+ * <AfMarketingNavbar theme="inkwell" onCtaClick={() => navigate('/signup')} />
+ * ```
+ */
+export declare const AfMarketingNavbar: React.FC<AfMarketingNavbarProps>;

package/dist/components/AfMarketingNavbar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AfNavbar, AfNavItem, AfNavMenu, AfNavMenuNest, AfButton, } from '../generated/components.js';
+import { ChevronDown } from '../icons/index.js';
+/**
+ * Pre-configured navigation bar matching the Affinda marketing website (affinda.com).
+ *
+ * Includes:
+ * - Platform, Solutions, Pricing, Resources, Enterprise navigation links
+ * - Solutions mega-menu dropdown with Industries, Use Cases, Documents, Resume Parser
+ * - Resources mega-menu dropdown with Resource Hub, Documentation, About
+ * - "Talk to us" and "Log in" utility links
+ * - "Try for free" CTA button
+ * - Mobile menu with direct links and accordions matching affinda.com behavior
+ *
+ * @example
+ * ```tsx
+ * <AfMarketingNavbar theme="inkwell" onCtaClick={() => navigate('/signup')} />
+ * ```
+ */
+export const AfMarketingNavbar = ({ theme = 'inkwell', className, style, onCtaClick, ctaHref, ctaText = 'Try for free', forceMobile = false, }) => {
+    return (_jsxs(AfNavbar, { theme: theme, className: className, style: style, forceMobile: forceMobile, children: [_jsxs("div", { slot: "start", children: [_jsx(AfNavItem, { hierarchy: "primary", variant: "01", href: "/platform", children: "Platform" }), _jsxs(AfNavItem, { hierarchy: "primary", variant: "01", children: ["Solutions", _jsx("span", { slot: "icon-right", children: _jsx(ChevronDown, { size: 20 }) })] }), _jsxs(AfNavItem, { hierarchy: "primary", variant: "01", children: ["Pricing", _jsx("span", { slot: "icon-right", children: _jsx(ChevronDown, { size: 20 }) })] }), _jsxs(AfNavItem, { hierarchy: "primary", variant: "01", children: ["Resources", _jsx("span", { slot: "icon-right", children: _jsx(ChevronDown, { size: 20 }) })] }), _jsx(AfNavItem, { hierarchy: "primary", variant: "01", href: "/enterprise", children: "Enterprise" })] }), _jsxs("div", { slot: "end", children: [_jsx(AfNavItem, { hierarchy: "primary", variant: "02", href: "/contact", children: "Talk to us" }), _jsx(AfNavItem, { hierarchy: "primary", variant: "02", href: "/login", children: "Log in" })] }), ctaHref ? (_jsx(AfButton, { slot: "button", variant: "primary", size: "default", href: ctaHref, children: ctaText })) : (_jsx(AfButton, { slot: "button", variant: "primary", size: "default", onClick: onCtaClick, children: ctaText })), _jsx("div", { slot: "dropdown-solutions", children: _jsxs(AfNavMenuNest, { type: "solutions", breakpoint: "desktop", showSidebarBorder: true, children: [_jsxs(AfNavMenu, { heading: "Industries", breakpoint: "desktop", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/industries", children: "All industries" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/banking", children: "Banking and financial services" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/insurance", children: "Insurance" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/logistics", children: "Logistics & transportation" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/bpo", children: "Business process outsourcing" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/healthcare", children: "Healthcare & life sciences" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/manufacturing", children: "Manufacturing & heavy enterprise" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/government", children: "Government & public sector" })] }), _jsxs(AfNavMenu, { heading: "Use cases", breakpoint: "desktop", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/use-cases", children: "All use cases" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/asset-finance", children: "Asset finance" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/lending", children: "Lending" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/loan-origination", children: "Loan origination and credit underwriting" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/claims", children: "Claims handling" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/kyc", children: "Customer onboarding (KYC)" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/accounts-payable", children: "Accounts payable" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/forms", children: "Forms Processing" })] }), _jsxs(AfNavMenu, { heading: "Documents", breakpoint: "desktop", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/documents", children: "All documents" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/payslips", children: "Payslips" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/invoices", children: "Invoices" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/certificates", children: "Certificates of analysis" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/safety-data-sheets", children: "Safety data sheets" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/purchase-orders", children: "Purchase orders" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/bank-statements", children: "Bank statements" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/medical", children: "Medical documents" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/shipping", children: "Shipping documents" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/utility-bills", children: "Utility bills" })] }), _jsxs(AfNavMenu, { slot: "sidebar", heading: "Resume Parser", breakpoint: "desktop", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/resume-parser", children: "All recruitment tech" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resume-parser/ats", children: "ATS" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resume-parser/hr-tech", children: "HR Tech" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resume-parser/job-boards", children: "Job boards" })] })] }) }), _jsx("div", { slot: "dropdown-resources", children: _jsxs(AfNavMenuNest, { type: "resources", breakpoint: "desktop", showSidebarBorder: true, children: [_jsxs(AfNavMenu, { heading: "Resources", breakpoint: "desktop", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/resources", children: "Resource hub" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resources/customer-stories", children: "Customer stories" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resources/demos", children: "Demo videos" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resources/whitepapers", children: "Whitepapers" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/blog", children: "Blog" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/partners", children: "Partners" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/tools", children: "Tools" })] }), _jsxs(AfNavMenu, { heading: "Documentation", breakpoint: "desktop", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/docs", children: "Documentation hub" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/docs/api", children: "API reference" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/docs/guides", children: "Product guides" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/docs/updates", children: "Product updates" })] }), _jsxs(AfNavMenu, { heading: "About Affinda", breakpoint: "desktop", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/about", children: "Company" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/careers", children: "Careers" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/group", children: "Affinda Group" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/security", children: "Privacy & security" })] })] }) }), _jsxs("div", { slot: "mobile-menu", children: [_jsx(AfNavItem, { hierarchy: "primary", variant: "01", href: "/platform", breakpoint: "mobile", children: "Platform" }), _jsxs("af-nav-accordion", { mode: "exclusive", breakpoint: "mobile", children: [_jsx("af-nav-accordion-item", { "item-id": "solutions", label: "Solutions", children: _jsxs(AfNavMenuNest, { type: "solutions", breakpoint: "mobile", children: [_jsxs(AfNavMenu, { heading: "Industries", breakpoint: "mobile", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/industries", children: "All industries" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/banking", children: "Banking and financial services" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/insurance", children: "Insurance" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/logistics", children: "Logistics & transportation" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/bpo", children: "Business process outsourcing" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/healthcare", children: "Healthcare & life sciences" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/manufacturing", children: "Manufacturing & heavy enterprise" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/industries/government", children: "Government & public sector" })] }), _jsxs(AfNavMenu, { heading: "Use cases", breakpoint: "mobile", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/use-cases", children: "All use cases" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/asset-finance", children: "Asset finance" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/lending", children: "Lending" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/loan-origination", children: "Loan origination and credit underwriting" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/claims", children: "Claims handling" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/kyc", children: "Customer onboarding (KYC)" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/accounts-payable", children: "Accounts payable" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/use-cases/forms", children: "Forms Processing" })] }), _jsxs(AfNavMenu, { heading: "Documents", breakpoint: "mobile", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/documents", children: "All documents" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/payslips", children: "Payslips" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/invoices", children: "Invoices" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/certificates", children: "Certificates of analysis" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/safety-data-sheets", children: "Safety data sheets" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/purchase-orders", children: "Purchase orders" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/bank-statements", children: "Bank statements" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/medical", children: "Medical documents" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/shipping", children: "Shipping documents" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/documents/utility-bills", children: "Utility bills" })] }), _jsxs(AfNavMenu, { heading: "Resume Parser", breakpoint: "mobile", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/resume-parser", children: "All recruitment tech" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resume-parser/ats", children: "ATS" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resume-parser/hr-tech", children: "HR Tech" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resume-parser/job-boards", children: "Job boards" })] })] }) }), _jsx("af-nav-accordion-item", { "item-id": "pricing", label: "Pricing", children: _jsxs(AfNavMenuNest, { type: "pricing", breakpoint: "mobile", children: [_jsx(AfNavMenu, { heading: "Document processing", breakpoint: "mobile", children: _jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/pricing", children: "Platform Pricing" }) }), _jsx(AfNavMenu, { heading: "Recruitment tech", breakpoint: "mobile", children: _jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/resume-parser/pricing", children: "Resume Parser Pricing" }) })] }) }), _jsx("af-nav-accordion-item", { "item-id": "resources", label: "Resources", children: _jsxs(AfNavMenuNest, { type: "resources", breakpoint: "mobile", children: [_jsxs(AfNavMenu, { heading: "Resources", breakpoint: "mobile", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/resources", children: "Resource hub" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resources/customer-stories", children: "Customer stories" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resources/demos", children: "Demo videos" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/resources/whitepapers", children: "Whitepapers" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/blog", children: "Blog" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/partners", children: "Partners" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/tools", children: "Tools" })] }), _jsxs(AfNavMenu, { heading: "Documentation", breakpoint: "mobile", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "01", href: "/docs", children: "Documentation hub" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/docs/api", children: "API reference" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/docs/guides", children: "Product guides" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/docs/updates", children: "Product updates" })] }), _jsxs(AfNavMenu, { heading: "About Affinda", breakpoint: "mobile", children: [_jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/about", children: "Company" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/careers", children: "Careers" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/group", children: "Affinda Group" }), _jsx(AfNavItem, { hierarchy: "secondary", variant: "02", href: "/security", children: "Privacy & security" })] })] }) })] }), _jsx(AfNavItem, { hierarchy: "primary", variant: "01", href: "/enterprise", breakpoint: "mobile", children: "Enterprise" }), _jsx(AfNavItem, { hierarchy: "primary", variant: "02", href: "/contact", breakpoint: "mobile", children: "Talk to us" }), _jsx(AfNavItem, { hierarchy: "primary", variant: "02", href: "/login", breakpoint: "mobile", children: "Log in" })] })] }));
+};
+AfMarketingNavbar.displayName = 'AfMarketingNavbar';

package/dist/components/AfModal.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface AfModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when the modal should close */
+    onClose: () => void;
+    /** Modal title */
+    title?: string;
+    /** Modal content */
+    children: React.ReactNode;
+    /** Size of the modal */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Whether clicking the overlay closes the modal */
+    closeOnOverlayClick?: boolean;
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfModal - Draft modal/dialog component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export declare const AfModal: React.FC<AfModalProps>;

package/dist/components/AfModal.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback } from 'react';
+/**
+ * AfModal - Draft modal/dialog component.
+ *
+ * ⚠️ DRAFT: This component is not yet designed in Figma. Styles may change.
+ */
+export const AfModal = ({ isOpen, onClose, title, children, size = 'medium', showCloseButton = true, closeOnOverlayClick = true, style, }) => {
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Escape') {
+            onClose();
+        }
+    }, [onClose]);
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen)
+        return null;
+    const sizeWidths = {
+        small: '400px',
+        medium: '560px',
+        large: '720px',
+    };
+    const overlayStyles = {
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(20, 52, 59, 0.6)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        padding: '24px',
+    };
+    const modalStyles = {
+        background: 'var(--colour-background-white, #fff)',
+        borderRadius: '16px',
+        width: '100%',
+        maxWidth: sizeWidths[size],
+        maxHeight: '90vh',
+        overflow: 'auto',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)',
+        fontFamily: 'var(--typography-bodyfont, system-ui, sans-serif)',
+        ...style,
+    };
+    const headerStyles = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '20px 24px',
+        borderBottom: '1px solid var(--colour-tints-inkwell-100, #e0e5e6)',
+    };
+    const closeButtonStyles = {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px',
+        color: 'var(--colour-tints-inkwell-400, #7a8a8d)',
+    };
+    return (_jsx("div", { style: overlayStyles, onClick: closeOnOverlayClick ? onClose : undefined, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'modal-title' : undefined, children: _jsxs("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), children: [(title || showCloseButton) && (_jsxs("div", { style: headerStyles, children: [title && (_jsx("h2", { id: "modal-title", style: { margin: 0, fontSize: '20px', fontWeight: 600, color: 'var(--colour-brand-inkwell, #14343b)' }, children: title })), showCloseButton && (_jsx("button", { type: "button", onClick: onClose, style: closeButtonStyles, "aria-label": "Close modal", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] })), _jsx("div", { style: { padding: '24px' }, children: children })] }) }));
+};

package/dist/components/AfNumberBadge.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type AfNumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export type AfNumberBadgeVariant = 'inCircle' | 'outlined';
+export interface AfNumberBadgeProps {
+    /** The number to display (1-10) */
+    number: AfNumberBadgeNumber;
+    /** Visual variant - inCircle shows filled badge, outlined shows just the number */
+    variant?: AfNumberBadgeVariant;
+    /** Size of the badge in pixels */
+    size?: number;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AfNumberBadge 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 AfNumberBadge: React.ForwardRefExoticComponent<AfNumberBadgeProps & React.RefAttributes<HTMLElement>>;

package/dist/components/{NumberBadge.js → AfNumberBadge.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 /**
- * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+ * AfNumberBadge 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) => {
+export const AfNumberBadge = React.forwardRef(({ number, variant = 'inCircle', size = 48, className, style, ...props }, ref) => {
     return React.createElement('af-number-badge', {
         ref,
         number,
@@ -14,4 +14,4 @@ export const NumberBadge = React.forwardRef(({ number, variant = 'inCircle', siz
         ...props,
     });
 });
-NumberBadge.displayName = 'NumberBadge';
+AfNumberBadge.displayName = 'AfNumberBadge';

package/dist/components/AfPaperclipDecoration.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface AfPaperclipDecorationProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /** Slot name for use inside web components */
+    slot?: string;
+}
+/**
+ * Decorative paperclip vector graphic for hero sections.
+ *
+ * Use with AfSection and position absolutely within the section:
+ *
+ * @example
+ * <AfSection theme="inkwell" padding="loose" style={{ position: 'relative', overflow: 'hidden' }}>
+ *   <AfPaperclipDecoration
+ *     style={{ position: 'absolute', bottom: -80, right: -800, zIndex: 0 }}
+ *   />
+ *   <AfContainer style={{ position: 'relative', zIndex: 1 }}>
+ *     {/* Hero content *\/}
+ *   </AfContainer>
+ * </AfSection>
+ */
+export declare function AfPaperclipDecoration({ className, style, slot }: AfPaperclipDecorationProps): any;

package/dist/components/{PaperclipDecoration.js → AfPaperclipDecoration.js}

@@ -2,17 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Decorative paperclip vector graphic for hero sections.
  *
- * When used inside HeroSection, pass slot="decoration" and position with style:
+ * Use with AfSection and position absolutely within the section:
  *
  * @example
- * <HeroSection variant="dark" withDecoration={true}>
- *   <PaperclipDecoration
- *     slot="decoration"
- *     style={{ position: 'absolute', bottom: -80, right: -800 }}
+ * <AfSection theme="inkwell" padding="loose" style={{ position: 'relative', overflow: 'hidden' }}>
+ *   <AfPaperclipDecoration
+ *     style={{ position: 'absolute', bottom: -80, right: -800, zIndex: 0 }}
  *   />
- *   <Heading>...</Heading>
- * </HeroSection>
+ *   <AfContainer style={{ position: 'relative', zIndex: 1 }}>
+ *     {/* Hero content *\/}
+ *   </AfContainer>
+ * </AfSection>
  */
-export function PaperclipDecoration({ className, style, slot }) {
+export function AfPaperclipDecoration({ 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 }) }));
 }