import * as React from 'react'; export type SelectionColor = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'destructive'; export type SelectionSize = 'sm' | 'md' | 'lg'; export type SelectionVariant = 'default' | 'card' | 'pill' | 'stacked' | 'icon-simple' | 'icon-card' | 'avatar' | 'payment' | 'simple' | 'chip'; export interface SelectionItem { /** Unique value for the option */ value: string; /** Display label */ label: string; /** Whether this option is disabled */ disabled?: boolean; /** Secondary text (e.g., "$10/month") */ subtext?: string; /** Supporting description text */ description?: string; /** Leading icon component */ icon?: React.ReactNode; /** Avatar element */ avatar?: React.ReactNode; /** Image URL */ image?: string; /** Alt text for the image (defaults to "" if omitted) */ imageAlt?: string; /** Position of the image */ imagePosition?: 'top' | 'left' | 'trailing'; /** Badge element */ badge?: React.ReactNode; /** Dot color for chip variant (named color or hex) */ dotColor?: string; /** Price display (e.g., "$10") */ price?: string; /** Price period (e.g., "per month") */ pricePeriod?: string; /** Payment icon element */ paymentIcon?: React.ReactNode; /** Action buttons */ actions?: React.ReactNode; } interface UseSelectionStateOptions { /** Controlled value */ value?: string; /** Default value for uncontrolled mode */ defaultValue?: string; /** Callback when value changes */ onValueChange?: (value: string) => void; } /** * Hook for managing single selection state (radio behavior). * Supports both controlled and uncontrolled modes. */ export declare function useSelectionState(options?: UseSelectionStateOptions): [string | undefined, (value: string) => void]; interface UseMultiSelectionStateOptions { /** Controlled value */ value?: string[]; /** Default value for uncontrolled mode */ defaultValue?: string[]; /** Callback when value changes */ onValueChange?: (value: string[]) => void; } /** * Hook for managing multi selection state (checkbox behavior). * Supports both controlled and uncontrolled modes. */ export declare function useMultiSelectionState(options?: UseMultiSelectionStateOptions): [string[], (value: string, checked: boolean) => void]; export declare const selectionColorClasses: Record; /** * Selection group container variants. * Used for the outer wrapper of a group of selection items. */ export declare const selectionGroupVariants: (props?: ({ orientation?: "horizontal" | "vertical" | null | undefined; gap?: "lg" | "md" | "sm" | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; /** * Selection indicator variants (for both radio and checkbox). * Renders as a rounded indicator with border. */ export declare const selectionIndicatorVariants: (props?: ({ size?: "lg" | "md" | "sm" | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; /** * Checkbox indicator variants (square with rounded corners). */ export declare const checkboxIndicatorVariants: (props?: ({ size?: "lg" | "md" | "sm" | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; /** * Inner dot sizes for radio indicators when checked. */ export declare const innerDotSizes: Record; /** * Text size classes for selection labels. */ export declare const textSizeClasses: Record; /** * Icon size classes for checkbox indicators. */ export declare const iconSizeClasses: Record; export declare const CHECKMARK_PATH = "M4 12l5 5L20 6"; export declare function DrawCheck({ className }: { className?: string; }): React.JSX.Element; export declare namespace DrawCheck { var displayName: string; } export interface SelectionIndicatorProps { /** Type of indicator to render */ type: 'checkbox' | 'radio'; /** Whether the indicator is checked */ checked?: boolean; /** Whether the indicator is disabled */ disabled?: boolean; /** Size of the indicator */ size?: SelectionSize; /** Color of the indicator */ color?: SelectionColor; /** Additional CSS classes */ className?: string; /** Whether the checkbox is in indeterminate state (checkbox only) */ indeterminate?: boolean; } /** * SelectionIndicator renders either a checkbox or radio indicator based on type. * For checkbox: renders a check icon when checked. * For radio: renders an inner dot when checked. */ declare const SelectionIndicator: React.ForwardRefExoticComponent>; export interface FeaturedIconProps { /** The icon content to display */ children: React.ReactNode; /** Size of the featured icon container */ size?: SelectionSize; /** Additional CSS classes */ className?: string; } /** * FeaturedIcon is a container for icons with border and shadow. * Used in icon-simple and icon-card variants. */ declare const FeaturedIcon: React.ForwardRefExoticComponent>; export type ColorDotColor = 'gray' | 'orange' | 'red' | 'darkRed' | 'brand' | 'success' | 'warning' | 'error' | string; export interface ColorDotProps { /** Color of the dot (named color or hex) */ color?: ColorDotColor; /** Size of the dot */ size?: SelectionSize; /** Additional CSS classes */ className?: string; } /** * ColorDot renders a colored dot for chip variant. * Supports named colors (gray, orange, red, etc.) and hex colors. */ declare const ColorDot: React.ForwardRefExoticComponent>; export { ColorDot, FeaturedIcon, SelectionIndicator };