@affinda/wc 0.0.14 → 0.0.16

package/dist/types/components/af-text/af-text.d.ts

@@ -1,11 +1,14 @@
+/**
+ * Text/body component that inherits color from theme context.
+ * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+ * via CSS custom properties.
+ */
 export declare class AfText {
     /** Text variant */
-    variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag';
+    variant: 'xlarge' | 'large' | 'medium' | 'small';
     /** Visual alignment */
     align: 'left' | 'center' | 'right';
     /** Semantic element to render */
     as: 'p' | 'span' | 'div' | 'label';
-    /** Theme for dark backgrounds */
-    theme: 'light' | 'dark';
     render(): any;
 }

package/dist/types/components/af-text-image/af-text-image.d.ts

@@ -0,0 +1,30 @@
+/**
+ * TextImage composite component that combines typography content with an image.
+ * Supports various layout configurations with image position and proportion options.
+ */
+export declare class AfTextImage {
+    /**
+     * Position of the image relative to the text content
+     */
+    imagePosition: 'left' | 'right';
+    /**
+     * Proportion of the image in the layout
+     * - '1/3': Image takes 1/3 of the width (text takes 2/3)
+     * - '1/4': Image takes 1/4 of the width (text takes 3/4)
+     * - '100%': Image takes full width below text
+     */
+    imageProportion: '1/3' | '1/4' | '100%';
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Image alt text for accessibility
+     */
+    alt: string;
+    /**
+     * Whether to show a second typography lockup section
+     */
+    showSecondLockup: boolean;
+    render(): any;
+}

package/dist/types/components/af-text-image-nest/af-text-image-nest.d.ts

@@ -0,0 +1,21 @@
+/**
+ * TextImageNest is a layout component that arranges multiple text-image content pieces
+ * in various grid layouts with optional footer buttons.
+ *
+ * This component inherits theming from a parent Section or theme-providing container.
+ * Wrap it in an af-section to apply themes.
+ *
+ * Supports multiple layout variants:
+ * - `single`: Full-width single item (side-by-side image + text)
+ * - `grid-2`: 2-column grid with stacked items
+ * - `grid-3`: 3-column grid with stacked items
+ * - `grid-4`: 4-column grid with stacked items
+ * - `stacked`: Alternating rows of side-by-side content
+ */
+export declare class AfTextImageNest {
+    /**
+     * Layout variant for the content grid
+     */
+    layout: 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked';
+    render(): any;
+}

package/dist/types/components/af-textarea/af-textarea.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Textarea component for multi-line text input with label, description, and error states.
+ *
+ * @slot label-end - Content to display at the end of the label (e.g., info icon)
+ */
+export declare class AfTextarea {
+    /**
+     * The label text for the textarea
+     */
+    label?: string;
+    /**
+     * Description text displayed below the label
+     */
+    description?: string;
+    /**
+     * Placeholder text for the textarea
+     */
+    placeholder?: string;
+    /**
+     * The current value of the textarea
+     */
+    value: string;
+    /**
+     * The name of the textarea for form submission
+     */
+    name?: string;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the textarea is required
+     */
+    required: boolean;
+    /**
+     * Whether the textarea is read-only
+     */
+    readonly: boolean;
+    /**
+     * Error message to display (also sets error state)
+     */
+    error?: string;
+    /**
+     * Whether to show the info icon next to the label
+     */
+    showInfoIcon: boolean;
+    /**
+     * Number of visible rows (height)
+     */
+    rows: number;
+    /**
+     * Maximum length of input value
+     */
+    maxlength?: number;
+    /**
+     * Minimum length of input value
+     */
+    minlength?: number;
+    /**
+     * Whether the textarea is resizable
+     */
+    resize: 'none' | 'vertical' | 'horizontal' | 'both';
+    /**
+     * Emitted when the textarea value changes
+     */
+    afInput: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Emitted when the textarea loses focus
+     */
+    afBlur: EventEmitter<void>;
+    /**
+     * Emitted when the textarea gains focus
+     */
+    afFocus: EventEmitter<void>;
+    /**
+     * Emitted when the info icon is clicked
+     */
+    afInfoClick: EventEmitter<void>;
+    private isFocused;
+    private isHovered;
+    private textareaEl?;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleInfoClick;
+    render(): any;
+}

package/dist/types/components/af-video-container/af-video-container.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Video Container molecule component for showcasing video content.
+ *
+ * Uses slots for typography lockups above and below the video.
+ * When used inside af-split-section, the top slot inherits the top theme
+ * and the bottom slot inherits the bottom theme for correct colors.
+ *
+ * @example
+ * ```html
+ * <af-split-section top-theme="mist-green" bottom-theme="white">
+ *   <af-video-container video-thumbnail-url="/path/to/thumbnail.jpg">
+ *     <af-typography-lockup slot="top" text-alignment="center" heading-size="2">
+ *       <af-heading level="2">Watch our product demo</af-heading>
+ *       <af-text slot="description">See how Affinda transforms your workflow</af-text>
+ *       <af-button slot="buttons" variant="primary">Get Started</af-button>
+ *     </af-typography-lockup>
+ *   </af-video-container>
+ * </af-split-section>
+ * ```
+ *
+ * @slot top - Content above the video (typically af-typography-lockup). Inherits top theme.
+ * @slot bottom - Content below the video (typically af-typography-lockup). Inherits bottom theme.
+ */
+export declare class AfVideoContainer {
+    /** Video thumbnail image URL */
+    videoThumbnailUrl: string;
+    /** Video alt text for accessibility */
+    videoAlt: string;
+    /** Optional video URL for play button link */
+    videoUrl: string;
+    /**
+     * Emitted when the play button is clicked.
+     * Use this to handle video playback (e.g., open modal, embed player).
+     * If videoUrl is set and no handler prevents default, opens URL in new tab.
+     */
+    playClick: EventEmitter<{
+        videoUrl: string;
+    }>;
+    /**
+     * Handles play button click - emits event and optionally opens URL
+     */
+    private handlePlayClick;
+    render(): any;
+}