@papernote/ui
Version:
A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive
104 lines • 2.95 kB
TypeScript
import { ReactNode } from 'react';
export interface ChipProps {
children: ReactNode;
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
size?: 'sm' | 'md' | 'lg';
onClose?: () => void;
icon?: ReactNode;
disabled?: boolean;
className?: string;
onClick?: () => void;
/** Whether the chip is in a selected state */
selected?: boolean;
/** Maximum width for text truncation */
maxWidth?: string | number;
/** Unique key for use in ChipGroup selection */
chipKey?: string;
}
export interface ChipGroupProps {
children: ReactNode;
/** Layout direction */
direction?: 'horizontal' | 'vertical';
/** Whether chips should wrap to next line */
wrap?: boolean;
/** Gap between chips */
gap?: 'xs' | 'sm' | 'md' | 'lg';
/** Selection mode */
selectionMode?: 'none' | 'single' | 'multiple';
/** Selected chip keys (controlled) */
selectedKeys?: string[];
/** Callback when selection changes */
onSelectionChange?: (keys: string[]) => void;
/** Additional CSS classes */
className?: string;
}
/**
* Chip - Compact element for displaying values with optional remove functionality
*
* @example Basic chip
* ```tsx
* <Chip>Tag Name</Chip>
* ```
*
* @example Removable chip
* ```tsx
* <Chip onClose={() => removeTag(tag)}>
* {tag.name}
* </Chip>
* ```
*
* @example With icon and selected state
* ```tsx
* <Chip
* icon={<Star className="h-3 w-3" />}
* selected={isSelected}
* onClick={() => toggleSelection()}
* >
* Favorite
* </Chip>
* ```
*/
export default function Chip({ children, variant, size, onClose, icon, disabled, className, onClick, selected, maxWidth, chipKey, }: ChipProps): import("react/jsx-runtime").JSX.Element;
/**
* ChipGroup - Container for multiple chips with layout and selection support
*
* @example Basic group
* ```tsx
* <ChipGroup wrap gap="sm">
* {tags.map(tag => (
* <Chip key={tag.id} onClose={() => removeTag(tag)}>
* {tag.name}
* </Chip>
* ))}
* </ChipGroup>
* ```
*
* @example Selectable group (single)
* ```tsx
* <ChipGroup
* selectionMode="single"
* selectedKeys={[selectedCategory]}
* onSelectionChange={(keys) => setSelectedCategory(keys[0])}
* >
* <Chip chipKey="all">All</Chip>
* <Chip chipKey="active">Active</Chip>
* <Chip chipKey="archived">Archived</Chip>
* </ChipGroup>
* ```
*
* @example Multi-select group
* ```tsx
* <ChipGroup
* selectionMode="multiple"
* selectedKeys={selectedTags}
* onSelectionChange={setSelectedTags}
* wrap
* >
* {availableTags.map(tag => (
* <Chip key={tag} chipKey={tag}>{tag}</Chip>
* ))}
* </ChipGroup>
* ```
*/
export declare function ChipGroup({ children, direction, wrap, gap, selectionMode, selectedKeys, onSelectionChange, className, }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=Chip.d.ts.map