"@radix-ui/react-context-menu": "^2.2.16",

        "@radix-ui/react-select": "^2.2.6",

    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],

    "@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.2.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww=="],

    "@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],

		"@radix-ui/react-context-menu": "^2.2.16",

		"@radix-ui/react-select": "^2.2.6",

import { CategoryEditDialog } from "@/components/category-edit-dialog";

import { ChangeCategoryDialog } from "@/components/change-category-dialog";

	const [categoryEditDialogOpen, setCategoryEditDialogOpen] =

		React.useState(false);

	const [changeCategoryDialogOpen, setChangeCategoryDialogOpen] =

		React.useState(false);

	const [categoryToEdit, setCategoryToEdit] = React.useState("");

	// Handle category edit from context menu

	const handleCategoryEdit = React.useCallback((category: string) => {

		setCategoryToEdit(category);

		setCategoryEditDialogOpen(true);

	}, []);

	// Handle category delete from context menu

	const handleCategoryDelete = React.useCallback(

		(category: string) => {

			// Find all feeds in this category

			const feedsInCategory = allFeeds.filter((f) => f.category === category);

			// Set category to null for all feeds in this category

			feedsInCategory.forEach((feed) => {

				evoluInstance.update("rssFeed", {

					id: feed.id as any,

					category: null,

				});

			});

			toast.success(

				`Removed category "${category}" from ${feedsInCategory.length} feed${feedsInCategory.length !== 1 ? "s" : ""}`,

			);

			// Navigate back to all feeds

			onFeedSelect(null);

		},

		[allFeeds, onFeedSelect],

	);

	// Handle category rename

	const handleCategoryRename = React.useCallback(

		(newName: string) => {

			if (!categoryToEdit) return;

			// Find all feeds in the old category

			const feedsInCategory = allFeeds.filter(

				(f) => f.category === categoryToEdit,

			);

			// Update category for all feeds

			feedsInCategory.forEach((feed) => {

				evoluInstance.update("rssFeed", {

					id: feed.id as any,

					category: newName as any,

				});

			});

			toast.success(

				`Renamed category "${categoryToEdit}" to "${newName}" for ${feedsInCategory.length} feed${feedsInCategory.length !== 1 ? "s" : ""}`,

			);

		},

		[categoryToEdit, allFeeds],

	);

	// Handle change category for a specific feed

	const handleChangeCategory = React.useCallback(() => {

		const selectedFeed = allFeeds.find((f) => f.id === selectedFeedId);

		if (!selectedFeed) return;

		setCategoryToEdit(selectedFeed.category || "");

		setChangeCategoryDialogOpen(true);

	}, [selectedFeedId, allFeeds]);

	// Handle feed category change

	const handleFeedCategoryChange = React.useCallback(

		(newCategory: string | null) => {

			if (!selectedFeedId) return;

			const selectedFeed = allFeeds.find((f) => f.id === selectedFeedId);

			if (!selectedFeed) return;

			evoluInstance.update("rssFeed", {

				id: selectedFeedId as any,

				category: newCategory as any,

			});

			const categoryText = newCategory ? `"${newCategory}"` : "Uncategorized";

			toast.success(`Moved feed to ${categoryText}`);

		},

		[selectedFeedId, allFeeds],

	);

	// Get list of existing categories for the change category dialog

	const existingCategories = React.useMemo(() => {

		const categories = new Set<string>();

		allFeeds.forEach((feed) => {

			if (feed.category) {

				categories.add(feed.category);

			}

		});

		return Array.from(categories).sort();

	}, [allFeeds]);

			<CategoryEditDialog

				open={categoryEditDialogOpen}

				onOpenChange={setCategoryEditDialogOpen}

				currentCategory={categoryToEdit}

				onRename={handleCategoryRename}

			/>

			<ChangeCategoryDialog

				open={changeCategoryDialogOpen}

				onOpenChange={setChangeCategoryDialogOpen}

				currentCategory={categoryToEdit}

				existingCategories={existingCategories}

				onChangeCategory={handleFeedCategoryChange}

			/>

								onChangeCategory={handleChangeCategory}

								onCategoryEdit={handleCategoryEdit}

								onCategoryDelete={handleCategoryDelete}

				onChangeCategory={handleChangeCategory}

import * as React from "react";

import {

	Dialog,

	DialogContent,

	DialogDescription,

	DialogFooter,

	DialogHeader,

	DialogTitle,

} from "@/components/ui/dialog";

import { Button } from "@/components/ui/button";

import { Input } from "@/components/ui/input";

import { Label } from "@/components/ui/label";

interface CategoryEditDialogProps {

	open: boolean;

	onOpenChange: (open: boolean) => void;

	currentCategory: string;

	onRename: (newName: string) => void;

}

export function CategoryEditDialog({

	open,

	onOpenChange,

	currentCategory,

	onRename,

}: CategoryEditDialogProps) {

	const [newName, setNewName] = React.useState(currentCategory);

	React.useEffect(() => {

		setNewName(currentCategory);

	}, [currentCategory]);

	const handleSubmit = (e: React.FormEvent) => {

		e.preventDefault();

		if (newName.trim() && newName !== currentCategory) {

			onRename(newName.trim());

			onOpenChange(false);

		}

	};

	return (

		<Dialog open={open} onOpenChange={onOpenChange}>

			<DialogContent className="sm:max-w-[425px]">

				<DialogHeader>

					<DialogTitle>Rename Category</DialogTitle>

					<DialogDescription>

						Rename "{currentCategory}" to a new name. This will update all feeds

						in this category.

					</DialogDescription>

				</DialogHeader>

				<form onSubmit={handleSubmit}>

					<div className="grid gap-4 py-4">

						<div className="grid gap-2">

							<Label htmlFor="category-name">Category Name</Label>

							<Input

								id="category-name"

								value={newName}

								onChange={(e) => setNewName(e.target.value)}

								placeholder="Enter category name"

								maxLength={50}

								autoFocus

							/>

						</div>

					</div>

					<DialogFooter>

						<Button

							type="button"

							variant="outline"

							onClick={() => onOpenChange(false)}

						>

							Cancel

						</Button>

						<Button type="submit" disabled={!newName.trim()}>

							Rename

						</Button>

					</DialogFooter>

				</form>

			</DialogContent>

		</Dialog>

	);

}

import * as React from "react";

import {

	Dialog,

	DialogContent,

	DialogDescription,

	DialogFooter,

	DialogHeader,

	DialogTitle,

} from "@/components/ui/dialog";

import { Button } from "@/components/ui/button";

import { Input } from "@/components/ui/input";

import { Label } from "@/components/ui/label";

import {

	Select,

	SelectContent,

	SelectItem,

	SelectTrigger,

	SelectValue,

} from "@/components/ui/select";

interface ChangeCategoryDialogProps {

	open: boolean;

	onOpenChange: (open: boolean) => void;

	currentCategory: string | null;

	existingCategories: string[];

	onChangeCategory: (newCategory: string | null) => void;

}

export function ChangeCategoryDialog({

	open,

	onOpenChange,

	currentCategory,

	existingCategories,

	onChangeCategory,

}: ChangeCategoryDialogProps) {

	const [mode, setMode] = React.useState<"existing" | "new">("existing");

	const [selectedCategory, setSelectedCategory] = React.useState<string>(

		currentCategory || "",

	);

	const [newCategory, setNewCategory] = React.useState("");

	React.useEffect(() => {

		if (open) {

			setMode("existing");

			setSelectedCategory(currentCategory || "");

			setNewCategory("");

		}

	}, [open, currentCategory]);

	const handleSubmit = (e: React.FormEvent) => {

		e.preventDefault();

		if (mode === "new") {

			if (newCategory.trim()) {

				onChangeCategory(newCategory.trim());

				onOpenChange(false);

			}

		} else {

			if (selectedCategory === "uncategorized") {

				onChangeCategory(null);

			} else if (selectedCategory) {

				onChangeCategory(selectedCategory);

			}

			onOpenChange(false);

		}

	};

	// Filter out current category and "Uncategorized" from the list

	const availableCategories = existingCategories.filter(

		(cat) => cat !== "Uncategorized",

	);

	return (

		<Dialog open={open} onOpenChange={onOpenChange}>

			<DialogContent className="sm:max-w-[425px]">

				<DialogHeader>

					<DialogTitle>Change Category</DialogTitle>

					<DialogDescription>

						Move this feed to a different category or create a new one.

					</DialogDescription>

				</DialogHeader>

				<form onSubmit={handleSubmit}>

					<div className="grid gap-4 py-4">

						<div className="grid gap-2">

							<Label>Choose an option</Label>

							<div className="flex gap-2">

								<Button

									type="button"

									variant={mode === "existing" ? "default" : "outline"}

									onClick={() => setMode("existing")}

									className="flex-1"

								>

									Existing Category

								</Button>

								<Button

									type="button"

									variant={mode === "new" ? "default" : "outline"}

									onClick={() => setMode("new")}

									className="flex-1"

								>

									New Category

								</Button>

							</div>

						</div>

						{mode === "existing" ? (

							<div className="grid gap-2">

								<Label htmlFor="category-select">Select Category</Label>

								<Select

									value={selectedCategory}

									onValueChange={setSelectedCategory}

								>

									<SelectTrigger id="category-select">

										<SelectValue placeholder="Select a category" />

									</SelectTrigger>

									<SelectContent>

										<SelectItem value="uncategorized">Uncategorized</SelectItem>

										{availableCategories.map((cat) => (

											<SelectItem key={cat} value={cat}>

												{cat}

											</SelectItem>

										))}

									</SelectContent>

								</Select>

							</div>

						) : (

							<div className="grid gap-2">

								<Label htmlFor="new-category">New Category Name</Label>

								<Input

									id="new-category"

									value={newCategory}

									onChange={(e) => setNewCategory(e.target.value)}

									placeholder="Enter category name"

									maxLength={50}

									autoFocus

								/>

							</div>

						)}

					</div>

					<DialogFooter>

						<Button

							type="button"

							variant="outline"

							onClick={() => onOpenChange(false)}

						>

							Cancel

						</Button>

						<Button

							type="submit"

							disabled={

								mode === "new" ? !newCategory.trim() : !selectedCategory

							}

						>

							Change Category

						</Button>

					</DialogFooter>

				</form>

			</DialogContent>

		</Dialog>

	);

}

import { ChevronRight, Pencil, Trash2 } from "lucide-react";

import {

	ContextMenu,

	ContextMenuContent,

	ContextMenuItem,

	ContextMenuTrigger,

} from "@/components/ui/context-menu";

	onCategoryEdit?: (category: string) => void;

	onCategoryDelete?: (category: string) => void;

	onCategoryEdit,

	onCategoryDelete,

				{categories.map((category) => {

					const isUncategorized = category === "Uncategorized";

					const categoryTrigger = (

						<CollapsibleTrigger asChild>

							<SidebarMenuButton tooltip={category}>

								<span className="font-medium">{category}</span>

								<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />

							</SidebarMenuButton>

						</CollapsibleTrigger>

					);

					return (

						<Collapsible

							key={category}

							asChild

							defaultOpen={true}

							className="group/collapsible"

						>

							<SidebarMenuItem>

								{isUncategorized ? (

									categoryTrigger

								) : (

									<ContextMenu>

										<ContextMenuTrigger asChild>

											{categoryTrigger}

										</ContextMenuTrigger>

										<ContextMenuContent>

											<ContextMenuItem

												onClick={() => onCategoryEdit?.(category)}

												<Pencil className="h-4 w-4 mr-2" />

												Rename Category

											</ContextMenuItem>

											<ContextMenuItem

												variant="destructive"

												onClick={() => onCategoryDelete?.(category)}

											>

												<Trash2 className="h-4 w-4 mr-2" />

												Delete Category

											</ContextMenuItem>

										</ContextMenuContent>

									</ContextMenu>

								)}

								<CollapsibleContent>

									<SidebarMenuSub>

										{feedsByCategory[category].map((feed) => (

											<SidebarMenuSubItem key={feed.id}>

												<SidebarMenuSubButton

													onClick={() => onFeedSelect(feed.id)}

													isActive={selectedFeedId === feed.id}

												>

													<span>{feed.title || "Untitled"}</span>

												</SidebarMenuSubButton>

											</SidebarMenuSubItem>

										))}

									</SidebarMenuSub>

								</CollapsibleContent>

							</SidebarMenuItem>

						</Collapsible>

					);

				})}

import {

	MoreVertical,

	Check,

	X,

	Trash2,

	FolderX,

	FolderEdit,

} from "lucide-react";

	onChangeCategory?: () => void;

	onChangeCategory,

								{selectedFeedId &&

									selectedFeedId !== "unread" &&

									onChangeCategory && (

										<DropdownMenuItem onClick={onChangeCategory}>

											<FolderEdit className="h-4 w-4 mr-2" />

											Change category

										</DropdownMenuItem>

									)}

								{selectedFeedId &&

									selectedFeedId !== "unread" &&

									onDeleteFeed && (

										<DropdownMenuItem

											onClick={onDeleteFeed}

											className="text-destructive focus:text-destructive"

										>

											<Trash2 className="h-4 w-4 mr-2" />

											Delete feed

										</DropdownMenuItem>

									)}

import * as React from "react"

import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"

import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function ContextMenu({

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {

  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />

}

function ContextMenuTrigger({

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {

  return (

    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />

  )

}

function ContextMenuGroup({

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {

  return (

    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />

  )

}

function ContextMenuPortal({

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {

  return (

    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />

  )

}

function ContextMenuSub({

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {

  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />

}

function ContextMenuRadioGroup({

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {

  return (

    <ContextMenuPrimitive.RadioGroup

      data-slot="context-menu-radio-group"

      {...props}

    />

  )

}

function ContextMenuSubTrigger({

  className,

  inset,

  children,

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {

  inset?: boolean

}) {

  return (

    <ContextMenuPrimitive.SubTrigger

      data-slot="context-menu-sub-trigger"

      data-inset={inset}

      className={cn(

        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

        className

      )}

      {...props}

    >

      {children}

      <ChevronRightIcon className="ml-auto" />

    </ContextMenuPrimitive.SubTrigger>

  )

}

function ContextMenuSubContent({

  className,

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {

  return (

    <ContextMenuPrimitive.SubContent

      data-slot="context-menu-sub-content"

      className={cn(

        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",

        className

      )}

      {...props}

    />

  )

}

function ContextMenuContent({

  className,

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {

  return (

    <ContextMenuPrimitive.Portal>

      <ContextMenuPrimitive.Content

        data-slot="context-menu-content"

        className={cn(

          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",

          className

        )}

        {...props}

      />

    </ContextMenuPrimitive.Portal>

  )

}

function ContextMenuItem({

  className,

  inset,

  variant = "default",

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {

  inset?: boolean

  variant?: "default" | "destructive"

}) {

  return (

    <ContextMenuPrimitive.Item

      data-slot="context-menu-item"

      data-inset={inset}

      data-variant={variant}

      className={cn(

        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

        className

      )}

      {...props}

    />

  )

}

function ContextMenuCheckboxItem({

  className,

  children,

  checked,

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {

  return (

    <ContextMenuPrimitive.CheckboxItem

      data-slot="context-menu-checkbox-item"

      className={cn(

        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

        className

      )}

      checked={checked}

      {...props}

    >

      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">

        <ContextMenuPrimitive.ItemIndicator>

          <CheckIcon className="size-4" />

        </ContextMenuPrimitive.ItemIndicator>

      </span>

      {children}

    </ContextMenuPrimitive.CheckboxItem>

  )

}

function ContextMenuRadioItem({

  className,

  children,

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {

  return (

    <ContextMenuPrimitive.RadioItem

      data-slot="context-menu-radio-item"

      className={cn(

        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

        className

      )}

      {...props}

    >

      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">

        <ContextMenuPrimitive.ItemIndicator>

          <CircleIcon className="size-2 fill-current" />

        </ContextMenuPrimitive.ItemIndicator>

      </span>

      {children}

    </ContextMenuPrimitive.RadioItem>

  )

}

function ContextMenuLabel({

  className,

  inset,

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {

  inset?: boolean

}) {

  return (

    <ContextMenuPrimitive.Label

      data-slot="context-menu-label"

      data-inset={inset}

      className={cn(

        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",

        className

      )}

      {...props}

    />

  )

}

function ContextMenuSeparator({

  className,

  ...props

}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {

  return (

    <ContextMenuPrimitive.Separator

      data-slot="context-menu-separator"

      className={cn("bg-border -mx-1 my-1 h-px", className)}

      {...props}

    />

  )

}

function ContextMenuShortcut({

  className,

  ...props

}: React.ComponentProps<"span">) {

  return (

    <span

      data-slot="context-menu-shortcut"

      className={cn(

        "text-muted-foreground ml-auto text-xs tracking-widest",

        className

      )}

      {...props}

    />

  )

}

export {

  ContextMenu,

  ContextMenuTrigger,

  ContextMenuContent,

  ContextMenuItem,

  ContextMenuCheckboxItem,

  ContextMenuRadioItem,

  ContextMenuLabel,

  ContextMenuSeparator,

  ContextMenuShortcut,

  ContextMenuGroup,

  ContextMenuPortal,

  ContextMenuSub,

  ContextMenuSubContent,

  ContextMenuSubTrigger,

  ContextMenuRadioGroup,

}

import * as React from "react"

import * as SelectPrimitive from "@radix-ui/react-select"

import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Select({

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Root>) {

  return <SelectPrimitive.Root data-slot="select" {...props} />

}

function SelectGroup({

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Group>) {

  return <SelectPrimitive.Group data-slot="select-group" {...props} />

}

function SelectValue({

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Value>) {

  return <SelectPrimitive.Value data-slot="select-value" {...props} />

}

function SelectTrigger({

  className,

  size = "default",

  children,

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {

  size?: "sm" | "default"

}) {

  return (

    <SelectPrimitive.Trigger

      data-slot="select-trigger"

      data-size={size}

      className={cn(

        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

        className

      )}

      {...props}

    >

      {children}

      <SelectPrimitive.Icon asChild>

        <ChevronDownIcon className="size-4 opacity-50" />

      </SelectPrimitive.Icon>

    </SelectPrimitive.Trigger>

  )

}

function SelectContent({

  className,

  children,

  position = "popper",

  align = "center",

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Content>) {

  return (

    <SelectPrimitive.Portal>

      <SelectPrimitive.Content

        data-slot="select-content"

        className={cn(

          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",

          position === "popper" &&

            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",

          className

        )}

        position={position}

        align={align}

        {...props}

      >

        <SelectScrollUpButton />

        <SelectPrimitive.Viewport

          className={cn(

            "p-1",

            position === "popper" &&

              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"

          )}

        >

          {children}

        </SelectPrimitive.Viewport>

        <SelectScrollDownButton />

      </SelectPrimitive.Content>

    </SelectPrimitive.Portal>

  )

}

function SelectLabel({

  className,

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Label>) {

  return (

    <SelectPrimitive.Label

      data-slot="select-label"

      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}

      {...props}

    />

  )

}

function SelectItem({

  className,

  children,

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Item>) {

  return (

    <SelectPrimitive.Item

      data-slot="select-item"

      className={cn(

        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",

        className

      )}

      {...props}

    >

      <span className="absolute right-2 flex size-3.5 items-center justify-center">

        <SelectPrimitive.ItemIndicator>

          <CheckIcon className="size-4" />

        </SelectPrimitive.ItemIndicator>

      </span>

      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

    </SelectPrimitive.Item>

  )

}

function SelectSeparator({

  className,

  ...props

}: React.ComponentProps<typeof SelectPrimitive.Separator>) {

  return (

    <SelectPrimitive.Separator

      data-slot="select-separator"

      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}

      {...props}

    />

  )

}

function SelectScrollUpButton({

  className,

  ...props

}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {

  return (

    <SelectPrimitive.ScrollUpButton

      data-slot="select-scroll-up-button"

      className={cn(

        "flex cursor-default items-center justify-center py-1",

        className

      )}

      {...props}

    >

      <ChevronUpIcon className="size-4" />

    </SelectPrimitive.ScrollUpButton>

  )

}

function SelectScrollDownButton({

  className,

  ...props

}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {

  return (

    <SelectPrimitive.ScrollDownButton

      data-slot="select-scroll-down-button"

      className={cn(

        "flex cursor-default items-center justify-center py-1",

        className

      )}

      {...props}

    >

      <ChevronDownIcon className="size-4" />

    </SelectPrimitive.ScrollDownButton>

  )

}

export {

  Select,

  SelectContent,

  SelectGroup,

  SelectItem,

  SelectLabel,

  SelectScrollDownButton,

  SelectScrollUpButton,

  SelectSeparator,

  SelectTrigger,

  SelectValue,

}