@accelint/design-toolkit/dist/components/chip/index.d.ts

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ContextValue } from 'react-aria-components';
import { ProviderProps } from '../../lib/types.js';
import { ChipProps, BaseChipProps, ChipListProps, DeletableChipProps, SelectableChipProps } from './types.js';
import 'tailwind-variants';
import './styles.js';
import 'tailwind-merge';

declare const ChipContext: react.Context<ContextValue<BaseChipProps, HTMLDivElement>>;
declare function ChipProvider({ children, ...props }: ProviderProps<BaseChipProps>): react_jsx_runtime.JSX.Element;
declare namespace ChipProvider {
    var displayName: string;
}
declare function ChipList<T extends object>({ ref, ...props }: ChipListProps<T>): react_jsx_runtime.JSX.Element;
declare namespace ChipList {
    var displayName: string;
}
declare function SelectableChip({ ref, ...props }: SelectableChipProps): react_jsx_runtime.JSX.Element;
declare namespace SelectableChip {
    var displayName: string;
}
declare function DeletableChip({ ref, ...props }: DeletableChipProps): react_jsx_runtime.JSX.Element;
declare namespace DeletableChip {
    var displayName: string;
}
/**
 * Chip - A compact element for displaying tags, filters, or selectable items
 *
 * Provides flexible chip functionality supporting both individual chips and chip lists.
 * Includes variants for deletable and selectable chips with keyboard navigation and
 * accessibility features. Perfect for tags, filters, or multi-selection interfaces.
 *
 * @example
 * // Basic chip
 * <Chip>JavaScript</Chip>
 *
 * @example
 * // Chip list with multiple items
 * <Chip.List>
 *   <Chip>React</Chip>
 *   <Chip>TypeScript</Chip>
 *   <Chip>Node.js</Chip>
 * </Chip.List>
 *
 * @example
 * // Deletable chips
 * <Chip.List onRemove={() => console.log('removed')}>
 *   <Chip.Deletable>
 *     Removable Tag
 *   </Chip.Deletable>
 * </Chip.List>
 *
 * @example
 * // Selectable chips
 * <Chip.List selectionMode="multiple">
 *   <Chip.Selectable id="option1">Option 1</Chip.Selectable>
 *   <Chip.Selectable id="option2">Option 2</Chip.Selectable>
 * </Chip.List>
 */
declare function Chip({ ref, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
declare namespace Chip {
    var displayName: string;
    var Provider: typeof ChipProvider;
    var List: typeof ChipList;
    var Deletable: typeof DeletableChip;
    var Selectable: typeof SelectableChip;
}

export { Chip, ChipContext };