analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
131 lines • 4.59 kB
TypeScript
import { InputHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
import { StoreApi } from 'zustand';
/**
* CheckboxList size variants
*/
type CheckboxListSize = 'small' | 'medium' | 'large';
/**
* CheckboxList visual state
*/
type CheckboxListState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
/**
* CheckboxList store interface
*/
interface CheckboxListStore {
values: string[];
setValues: (values: string[]) => void;
toggleValue: (value: string) => void;
onValuesChange?: (values: string[]) => void;
disabled: boolean;
name: string;
}
type CheckboxListStoreApi = StoreApi<CheckboxListStore>;
/**
* Hook to access CheckboxList store
*/
export declare const useCheckboxListStore: (externalStore?: CheckboxListStoreApi) => CheckboxListStoreApi;
/**
* CheckboxList component props interface
*/
export type CheckboxListProps = {
/** Current selected values */
values?: string[];
/** Default selected values for uncontrolled usage */
defaultValues?: string[];
/** Callback when selection changes */
onValuesChange?: (values: string[]) => void;
/** Group name for all checkboxes */
name?: string;
/** Disabled state for the entire group */
disabled?: boolean;
/** Additional CSS classes */
className?: string;
/** Children components */
children: ReactNode;
} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValues'>;
/**
* CheckboxList component for flexible checkbox group composition
*
* Uses Zustand for state management with automatic store injection.
* Allows complete control over layout and styling by composing with CheckboxListItem.
*
* @example
* ```tsx
* <CheckboxList defaultValues={["option1"]} onValuesChange={setValues}>
* <div className="flex items-center gap-3">
* <CheckboxListItem value="option1" id="c1" />
* <label htmlFor="c1">Option 1</label>
* </div>
* <div className="flex items-center gap-3">
* <CheckboxListItem value="option2" id="c2" />
* <label htmlFor="c2">Option 2</label>
* </div>
* </CheckboxList>
* ```
*/
declare const CheckboxList: import("react").ForwardRefExoticComponent<{
/** Current selected values */
values?: string[];
/** Default selected values for uncontrolled usage */
defaultValues?: string[];
/** Callback when selection changes */
onValuesChange?: (values: string[]) => void;
/** Group name for all checkboxes */
name?: string;
/** Disabled state for the entire group */
disabled?: boolean;
/** Additional CSS classes */
className?: string;
/** Children components */
children: ReactNode;
} & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValues"> & import("react").RefAttributes<HTMLDivElement>>;
/**
* CheckboxListItem component props interface
*/
export type CheckboxListItemProps = {
/** Value for this checkbox item */
value: string;
/** Store reference (automatically injected by CheckboxList) */
store?: CheckboxListStoreApi;
/** Disabled state for this specific item */
disabled?: boolean;
/** Size variant */
size?: CheckboxListSize;
/** Visual state */
state?: CheckboxListState;
/** Additional CSS classes */
className?: string;
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'value' | 'checked' | 'onChange' | 'size'>;
/**
* CheckboxListItem component for use within CheckboxList
*
* A checkbox without label that works within CheckboxList context.
* Provides just the checkbox input for maximum flexibility in composition.
*
* @example
* ```tsx
* <CheckboxList defaultValues={["option1"]}>
* <div className="flex items-center gap-3">
* <CheckboxListItem value="option1" id="c1" />
* <label htmlFor="c1">Option 1</label>
* </div>
* </CheckboxList>
* ```
*/
declare const CheckboxListItem: import("react").ForwardRefExoticComponent<{
/** Value for this checkbox item */
value: string;
/** Store reference (automatically injected by CheckboxList) */
store?: CheckboxListStoreApi;
/** Disabled state for this specific item */
disabled?: boolean;
/** Size variant */
size?: CheckboxListSize;
/** Visual state */
state?: CheckboxListState;
/** Additional CSS classes */
className?: string;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value" | "onChange" | "size" | "checked"> & import("react").RefAttributes<HTMLInputElement>>;
export default CheckboxList;
export { CheckboxListItem };
//# sourceMappingURL=CheckboxList.d.ts.map