@payfit/unity-components
Version:
44 lines (43 loc) • 2.54 kB
TypeScript
import { ComponentPropsWithoutRef, ReactNode } from 'react';
/** Props for one explicitly identified question in an `AIStructuredInput`. */
export type AIStructuredInputStepProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className'> & {
/** Stable, explicit identity for this question and its consumer-owned draft. */
id: string;
/** Question prompt, answer control, and any other step-specific content. */
children: ReactNode;
/** Adds styles to the step content wrapper. */
className?: string;
};
/**
* Marks one question and answer region in an `AIStructuredInput` sequence.
*
* Give every step a stable, explicit `id`. The root uses it for navigation
* identity; consumers can use the same value to key answer drafts that must
* survive when inactive steps unmount. Use `AIStructuredInputStepTitle` as the
* first child when the sequence should place navigation beside the question.
* @param props - Step identity, content, and container attributes.
* @param props.id - Explicit stable identity for this question and its draft.
* @param props.children - Question content, including its answer control.
* @param props.className - Additional classes for the step wrapper.
* @remarks
* - Inactive steps are unmounted by `AIStructuredInput`.
* - Keep answer values in consumer-owned state if they must persist across navigation.
* @example
* ```tsx
* <AIStructuredInputStep id="start-date">
* <AIStructuredInputStepTitle>Choose the start date</AIStructuredInputStepTitle>
* <DateCalendar aria-label="Start date" />
* </AIStructuredInputStep>
* ```
* @see {@link AIStructuredInputStepProps} for all available props.
* @see {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/modules/ai-kit/components/ai-structured-input/parts Source code}
* @see {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=25380-10878 Figma design}
*/
export declare const AIStructuredInputStep: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "className"> & {
/** Stable, explicit identity for this question and its consumer-owned draft. */
id: string;
/** Question prompt, answer control, and any other step-specific content. */
children: ReactNode;
/** Adds styles to the step content wrapper. */
className?: string;
} & import('react').RefAttributes<HTMLDivElement>>;