"use client"; import { XIcon } from "lucide-react"; import { type ComponentProps, createContext, type MouseEventHandler, type ReactNode, useContext, useEffect, useRef, useState, } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; type TagsContextType = { value?: string; setValue?: (value: string) => void; open: boolean; onOpenChange: (open: boolean) => void; width?: number; setWidth?: (width: number) => void; }; const TagsContext = createContext({ value: undefined, setValue: undefined, open: false, onOpenChange: () => {}, width: undefined, setWidth: undefined, }); const useTagsContext = () => { const context = useContext(TagsContext); if (!context) { throw new Error("useTagsContext must be used within a TagsProvider"); } return context; }; export type TagsProps = { value?: string; setValue?: (value: string) => void; open?: boolean; onOpenChange?: (open: boolean) => void; children?: ReactNode; className?: string; }; export const Tags = ({ value, setValue, open: controlledOpen, onOpenChange: controlledOnOpenChange, children, className, }: TagsProps) => { const [uncontrolledOpen, setUncontrolledOpen] = useState(false); const [width, setWidth] = useState(); const ref = useRef(null); const open = controlledOpen ?? uncontrolledOpen; const onOpenChange = controlledOnOpenChange ?? setUncontrolledOpen; useEffect(() => { if (!ref.current) { return; } const resizeObserver = new ResizeObserver((entries) => { setWidth(entries[0].contentRect.width); }); resizeObserver.observe(ref.current); return () => { resizeObserver.disconnect(); }; }, []); return (

{children}

); }; export type TagsTriggerProps = ComponentProps; export const TagsTrigger = ({ className, children, ...props }: TagsTriggerProps) => ( ); export type TagsValueProps = ComponentProps; export const TagsValue = ({ className, children, onRemove, ...props }: TagsValueProps & { onRemove?: () => void }) => { const handleRemove: MouseEventHandler = (event) => { event.preventDefault(); event.stopPropagation(); onRemove?.(); }; return ( {children} {onRemove && ( // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable badge" // biome-ignore lint/a11y/useKeyWithClickEvents: "This is a clickable badge"

)} ); }; export type TagsContentProps = ComponentProps; export const TagsContent = ({ className, children, ...props }: TagsContentProps) => { const { width } = useTagsContext(); return ( {children} ); }; export type TagsInputProps = ComponentProps; export const TagsInput = ({ className, ...props }: TagsInputProps) => ( ); export type TagsListProps = ComponentProps; export const TagsList = ({ className, ...props }: TagsListProps) => ( ); export type TagsEmptyProps = ComponentProps; export const TagsEmpty = ({ children, className, ...props }: TagsEmptyProps) => ( {children ?? "No tags found."} ); export type TagsGroupProps = ComponentProps; export const TagsGroup = CommandGroup; export type TagsItemProps = ComponentProps; export const TagsItem = ({ className, ...props }: TagsItemProps) => ( );

tags

Instalação

Dependências

Registry dependencies