4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T148a,"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) => ( ); 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["badge","button","command","popover"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"index.tsx","content":"$51","type":"registry:ui","target":"components/kibo-ui/tags/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]