import { type ReactNode } from 'react';
import { type CheckboxProps } from '../Checkbox';
import { type CheckboxCardSlotRecipeVariant } from '../../styled-system/recipes';
import { type ResponsiveSlot } from '../types/responsive';
export type CheckboxState = Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate'>;
/**
 * Function type for rendering CheckboxCard details content.
 * Receives the current checkbox state as a parameter.
 */
export type CheckboxCardRenderDetailsSlot = (checkboxState: CheckboxState) => ReactNode;
/**
 * ResponsiveSlot type specifically for CheckboxCard details content.
 * Supports different content for desktop and mobile viewports, with functions that receive CheckboxState.
 */
export type CheckboxCardResponsiveSlot = ResponsiveSlot<CheckboxCardRenderDetailsSlot>;
export type CheckboxCardProps = {
    /**
     * The layout of the checkbox card.
     * Currently, the layout can be `horizontal` or `vertical`.
     *
     * @default `vertical`
     */
    layout?: CheckboxCardSlotRecipeVariant['layout'];
    /**
     * Label text for explaining checkbox value.
     */
    label: string;
    /**
     * Content or function to render the details slot.
     *
     * @example
     * ```tsx
     * // Function-based (current usage - maintains backward compatibility)
     * renderDetailsSlot={(checkboxState) => (
     *   <div>Status: {checkboxState.checked ? 'Selected' : 'Not selected'}</div>
     * )}
     *
     * // ResponsiveSlot with static content
     * renderDetailsSlot={{
     *   base: <div>Desktop details content</div>,
     *   narrowViewport: <div>Mobile details content</div>
     * }}
     *
     * // ResponsiveSlot with functions
     * renderDetailsSlot={{
     *   base: (checkboxState) => <div>Desktop: {checkboxState.checked ? 'Yes' : 'No'}</div>,
     *   narrowViewport: (checkboxState) => <div>Mobile: {checkboxState.checked ? '✓' : '✗'}</div>
     * }}
     * ```
     */
    renderDetailsSlot?: CheckboxCardResponsiveSlot | CheckboxCardRenderDetailsSlot;
    /**
     * Whether to disable the responsive behavior.
     *
     * When set to `true`, the component maintains its layout regardless of viewport size.
     * When set to `false` (default), the component will automatically switch to vertical layout on narrow viewports.
     *
     * @default false
     */
    disableResponsive?: CheckboxCardSlotRecipeVariant['disableResponsive'];
} & Omit<CheckboxProps, 'label'>;