"use client";

import { useControllableState } from "@radix-ui/react-use-controllable-state";
import { XIcon } from "lucide-react";
import * as React from "react";
import {
  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<TagsContextType>({
  value: undefined,
  setValue: undefined,
  open: false,
  onOpenChange: () => {},
  width: undefined,
  setWidth: undefined,
});

function useTagsContext() {
  const context = useContext(TagsContext);

  if (!context) {
    throw new Error("useTagsContext must be used within a TagsProvider");
  }

  return context;
}

function Tags({
  value,
  setValue,
  open: controlledOpen,
  onOpenChange: controlledOnOpenChange,
  children,
  className,
}: React.ComponentProps<"div"> & {
  value?: string;
  setValue?: (value: string) => void;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  children?: ReactNode;
  className?: string;
}) {
  const [open, setOpen] = useControllableState({
    prop: controlledOpen,
    defaultProp: false,
    onChange: controlledOnOpenChange,
  });
  const [width, setWidth] = useState<number | undefined>(undefined);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) {
      return;
    }

    const resizeObserver = new ResizeObserver((entries) => {
      setWidth(entries[0].contentRect.width);
    });

    resizeObserver.observe(ref.current);

    return () => {
      resizeObserver.disconnect();
    };
  }, [setWidth]);

  return (
    <TagsContext.Provider
      value={{ value, setValue, open, onOpenChange: setOpen, width, setWidth }}
    >
      <Popover onOpenChange={setOpen} open={open}>
        <div
          data-slot="tags"
          data-state={open ? "open" : "closed"}
          className={cn("relative w-full max-w-xs min-w-48", className)}
          ref={ref}
        >
          {children}
        </div>
      </Popover>
    </TagsContext.Provider>
  );
}

function TagsTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { open } = useTagsContext();

  return (
    <PopoverTrigger asChild>
      <Button
        data-slot="tags-trigger"
        data-state={open ? "open" : "closed"}
        className={cn(
          "group h-auto min-h-9 w-full items-center justify-baseline px-3 py-2",
          className
        )}
        role="combobox"
        aria-expanded={open}
        variant="outline"
        {...props}
      >
        <div className="flex flex-wrap items-center gap-1">
          {children}

          <span className="py-px text-sm text-muted-foreground group-has-data-[slot=tags-selected-value]:pl-1">
            Select a tag...
          </span>
        </div>
      </Button>
    </PopoverTrigger>
  );
}

function TagsSelectedValue({
  className,
  children,
  onRemove,
  ...props
}: React.ComponentProps<typeof Badge> & { onRemove?: () => void }) {
  const handleRemove: MouseEventHandler<HTMLButtonElement> = (event) => {
    event.preventDefault();
    event.stopPropagation();
    onRemove?.();
  };

  return (
    <Badge
      data-slot="tags-selected-value"
      className={cn(
        "group/tags-value flex cursor-default items-center gap-1 text-xs",
        className
      )}
      {...props}
    >
      {children}
      {onRemove && (
        <button
          data-slot="tags-remove-button"
          className={cn(
            "pointer-events-auto size-auto shrink-0 cursor-pointer transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
          )}
          type="button"
          onClick={handleRemove}
          aria-label="Remove tag"
        >
          <XIcon className="pointer-events-none size-3 shrink-0 transition-opacity group-hover/tags-value:opacity-80" />
        </button>
      )}
    </Badge>
  );
}

function TagsContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof PopoverContent>) {
  const { width } = useTagsContext();

  return (
    <PopoverContent
      data-slot="tags-content"
      className={cn("p-0", className)}
      style={{ width }}
      {...props}
    >
      <Command>{children}</Command>
    </PopoverContent>
  );
}

function TagsInput({ className, ...props }: React.ComponentProps<typeof CommandInput>) {
  return (
    <CommandInput
      data-slot="tags-input"
      className={cn("h-10 py-2.5", className)}
      {...props}
    />
  );
}

function TagsList({ className, ...props }: React.ComponentProps<typeof CommandList>) {
  return (
    <CommandList
      data-slot="tags-list"
      className={cn("max-h-[300px]", className)}
      {...props}
    />
  );
}

function TagsEmpty({
  children,
  className,
  ...props
}: React.ComponentProps<typeof CommandEmpty>) {
  return (
    <CommandEmpty data-slot="tags-empty" {...props}>
      {children ?? "No tags found."}
    </CommandEmpty>
  );
}

function TagsGroup({ className, ...props }: React.ComponentProps<typeof CommandGroup>) {
  return (
    <CommandGroup data-slot="tags-group" className={cn("py-1.5", className)} {...props} />
  );
}

function TagsItem({
  children,
  className,
  selected,
  ...props
}: React.ComponentProps<typeof CommandItem> & { selected?: boolean }) {
  return (
    <CommandItem
      data-checked={selected ? "true" : undefined}
      data-slot="tags-item"
      data-selected={selected ? "true" : undefined}
      className={cn(
        "cursor-pointer items-center justify-between gap-2 [&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='text-'])]:text-popover-foreground",
        className
      )}
      {...props}
    >
      {children}
    </CommandItem>
  );
}

export {
  Tags,
  TagsContent,
  TagsEmpty,
  TagsGroup,
  TagsInput,
  TagsItem,
  TagsList,
  TagsSelectedValue,
  TagsTrigger,
};
Tags

Get access to this component and the full library

Built for real interfaces

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

More Components

Real support from the team behind shadcncraft
