@codefast-ui/checkbox-group/dist/checkbox-group.d.ts

Accessible checkbox group component built with React and Radix UI

import type { ComponentProps, JSX } from "react";
import type { Scope } from "@radix-ui/react-context";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
/**
 * Type for components that can be scoped within the CheckboxGroup context
 */
type ScopedProps<P> = P & {
    /**
     * Optional scope for the CheckboxGroup component
     */
    __scopeCheckboxGroup?: Scope;
};
declare const createCheckboxGroupScope: import("@radix-ui/react-context").CreateScope;
/**
 * Context values shared between CheckboxGroup components
 */
interface CheckboxGroupContextValue {
    /**
     * Whether all checkbox items are disabled
     */
    disabled: boolean;
    /**
     * Function called when a checkbox item is checked
     * @param value - The value of the checked item
     */
    onItemCheck: (value: string) => void;
    /**
     * Function called when a checkbox item is unchecked
     * @param value - The value of the unchecked item
     */
    onItemUncheck: (value: string) => void;
    /**
     * Whether checkbox selection is required
     */
    required: boolean;
    /**
     * Optional name attribute for the checkbox group form field
     */
    name?: string;
    /**
     * Array of currently selected checkbox values
     */
    value?: string[];
}
/**
 * Base props for the CheckboxGroup component
 */
interface CheckboxGroupBaseProps {
    /**
     * Default values for the checkbox group when uncontrolled
     */
    defaultValue?: string[];
    /**
     * Direction for roving focus navigation
     */
    dir?: RovingFocusGroup.RovingFocusGroupProps["dir"];
    /**
     * Whether the entire checkbox group is disabled
     */
    disabled?: boolean;
    /**
     * Whether focus should loop to the start/end when reaching the boundaries
     */
    loop?: RovingFocusGroup.RovingFocusGroupProps["loop"];
    /**
     * Name attribute for the checkbox group form field
     */
    name?: CheckboxGroupContextValue["name"];
    /**
     * Callback fired when the selected values change
     * @param value - The new array of selected values
     */
    onValueChange?: (value?: string[]) => void;
    /**
     * Orientation of the checkbox group (horizontal or vertical)
     */
    orientation?: RovingFocusGroup.RovingFocusGroupProps["orientation"];
    /**
     * Whether at least one checkbox must be selected
     */
    required?: boolean;
    /**
     * Controlled values for the checkbox group
     */
    value?: CheckboxGroupContextValue["value"];
}
/**
 * Props for the CheckboxGroup component
 */
type CheckboxGroupProps = CheckboxGroupBaseProps & ComponentProps<"div">;
/**
 * CheckboxGroup component that manages a group of checkboxes with roving focus
 */
declare function CheckboxGroup({ __scopeCheckboxGroup, defaultValue, dir, disabled, loop, name, onValueChange, orientation, required, value: valueProperty, ...props }: ScopedProps<CheckboxGroupProps>): JSX.Element;
/**
 * Props for the CheckboxGroupItem component
 */
interface CheckboxGroupItemProps extends Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "checked" | "defaultChecked" | "name" | "onCheckedChange"> {
    /**
     * Value of the checkbox item, used to identify the item within the group
     */
    value: string;
    /**
     * Whether this specific checkbox item is disabled
     */
    disabled?: boolean;
}
/**
 * Individual checkbox item within a CheckboxGroup
 */
declare function CheckboxGroupItem({ __scopeCheckboxGroup, disabled, ...props }: ScopedProps<CheckboxGroupItemProps>): JSX.Element;
/**
 * Props for the CheckboxGroupIndicator component
 */
type CheckboxGroupIndicatorProps = ComponentProps<typeof CheckboxPrimitive.Indicator>;
/**
 * Visual indicator component for a CheckboxGroupItem
 */
declare function CheckboxGroupIndicator({ __scopeCheckboxGroup, ...props }: ScopedProps<CheckboxGroupIndicatorProps>): JSX.Element;
export { CheckboxGroup, CheckboxGroupIndicator, CheckboxGroupItem, createCheckboxGroupScope, CheckboxGroupIndicator as Indicator, CheckboxGroupItem as Item, CheckboxGroup as Root, };
export type { CheckboxGroupIndicatorProps, CheckboxGroupItemProps, CheckboxGroupProps };