@stanfordspezi/spezi-web-design-system/dist/src/molecules/ConsentDialog/ConsentDialog.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { ComponentProps } from 'react';
import { Button } from '../../components/Button';
import { Checkbox } from '../../components/Checkbox';
import { Dialog } from '../../components/Dialog';
import { SideLabelProps } from '../../components/SideLabel';
import { TooltipProps } from '../../components/Tooltip';
/**
 * Extends Dialog props but omits onOpenChange to prevent closing.
 */
interface ConsentDialogProps extends Omit<ComponentProps<typeof Dialog>, "onOpenChange"> {
}
/**
 * A dialog component that requires explicit consent before proceeding.
 * The dialog cannot be closed until the consent checkbox is checked.
 *
 * Create your own component out of primitive components.
 *
 * If you're creating app-wise consent, Render it at the root of your router to ensure the user has provided consent.
 *
 * @example
 * ```tsx
 * <ConsentDialog open={userDidntAgreeToTermsAndConditionsYet}>
 *   <DialogHeader>
 *     <DialogTitle>Terms and Conditions</DialogTitle>
 *     <DialogDescription>Please read and accept the terms</DialogDescription>
 *   </DialogHeader>
 *   <ConsentDialogContent>
 *     <p>Terms content...</p>
 *   </ConsentDialogContent>
 *   <ConsentDialogCheckbox label="I agree to the terms" />
 *   <ConsentDialogSubmit onClick={handleAcceptConsent}>Accept</ConsentDialogSubmit>
 * </ConsentDialog>
 * ```
 */
export declare const ConsentDialog: ({ children, ...props }: ConsentDialogProps) => import("react").JSX.Element;
interface ConsentDialogContentProps extends ComponentProps<"div"> {
}
/**
 * A scrollable container for dialog content.
 * Useful for displaying long text like terms and conditions.
 *
 * @example
 * ```tsx
 * <ConsentDialogContent>
 *   <p>Long terms and conditions text...</p>
 * </ConsentDialogContent>
 * ```
 */
export declare const ConsentDialogContent: ({ children, className, ...props }: ConsentDialogContentProps) => import("react").JSX.Element;
interface ConsentDialogCheckboxProps extends ComponentProps<typeof Checkbox>, Pick<SideLabelProps, "label"> {
}
/**
 * A checkbox component that controls the consent state.
 *
 * @example
 * ```tsx
 * <ConsentDialogCheckbox label="I agree to the terms and conditions" />
 * ```
 */
export declare const ConsentDialogCheckbox: ({ label, ...props }: ConsentDialogCheckboxProps) => import("react").JSX.Element;
interface ConsentDialogSubmitProps extends ComponentProps<typeof Button>, Pick<TooltipProps, "tooltip"> {
}
/**
 * A submit button that is disabled until consent is given.
 *
 * @example
 * ```tsx
 * <ConsentDialogSubmit onClick={handleSubmit}>Accept Terms</ConsentDialogSubmit>
 * ```
 */
export declare const ConsentDialogSubmit: ({ tooltip, className, ...props }: ConsentDialogSubmitProps) => import("react").JSX.Element;
export {};