@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/primitives/command.tsx

@@ -1,393 +0,0 @@
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "~/components/catalyst-ui";
-import { Dialog, DialogContent } from "~/components/catalyst-ui";
-import { Button } from "~/components/catalyst-ui";
-import React from "react";
-
-// @dev app/components/catalyst-ui/data/primitive-data.tsx:2631
-const commandVariants = cva(
-  "flex h-full w-full flex-col overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-all",
-  {
-    variants: {
-      variant: {
-        default: "bg-popover text-popover-foreground border border-border shadow-xs",
-        framer: "max-w-[640px] w-full p-2 bg-gray-900 rounded-2xl border border-gray-200 shadow-lg font-sans hover:shadow-xl",
-        linear: "max-w-[640px] w-full bg-gradient-to-br from-[#27282b] to-[#2d2e31] rounded-lg overflow-hidden p-0 font-sans shadow-lg hover:shadow-xl",
-        raycast: "max-w-[640px] w-full bg-gray-900 rounded-xl py-2 font-sans shadow-lg border border-gray-700 relative hover:shadow-xl",
-        vercel: "max-w-[640px] w-full p-2 bg-[rgba(22,22,22,0.7)] rounded-xl overflow-hidden font-sans border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl",
-        search: "w-full rounded-2xl border shadow-2xl border-zinc-800 bg-zinc-900 hover:shadow-3xl",
-        elevated: "bg-surface-container-low text-primary shadow-md hover:shadow-lg active:shadow-sm",
-        filled: "bg-primary text-on-primary shadow-sm hover:shadow-md active:shadow-sm",
-        tonal: "bg-secondary-container text-on-secondary-container hover:shadow-sm active:shadow-none",
-        glass: "bg-background/20 backdrop-blur-md border border-border/50 text-foreground hover:bg-background/30 shadow-lg",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        gradient: "bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-md hover:shadow-lg active:shadow-sm",
-        fumadocs: "w-full divide-y divide-border rounded-2xl border bg-popover/60 backdrop-blur-xl text-popover-foreground shadow-2xl shadow-black/40 overflow-hidden",
-
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const commandInputVariants = cva(
-  "flex items-center border-b px-3 transition-all",
-  {
-    variants: {
-      variant: {
-        default: "",
-        framer: "h-12 gap-2 border-gray-200 mb-3 pb-2",
-        linear: "p-0 border-gray-200",
-        raycast: "border-0 px-4",
-        vercel: "border-gray-200 px-2 mb-4",
-        elevated: "border-primary/20",
-        filled: "border-on-primary/20",
-        tonal: "border-on-secondary-container/20",
-        glass: "border-border/30",
-        destructive: "border-destructive/20",
-        gradient: "border-primary-foreground/20",
-        fumadocs: "flex flex-row items-center gap-2 p-3 pb-2 border-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const commandInputFieldVariants = cva(
-  "flex w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-  {
-    variants: {
-      variant: {
-        default: "h-11",
-        framer: "h-auto text-base border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 focus-visible:ring-blue-500",
-        linear: "h-auto text-lg p-5 border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 rounded-none m-0 caret-[#6e5ed2] focus-visible:ring-[#6e5ed2]",
-        raycast: "h-auto text-[15px] py-2 px-4 border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 focus-visible:ring-gray-400",
-        vercel: "h-auto text-[17px] py-2 px-2 pb-4 border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 rounded-none focus-visible:ring-gray-400",
-        elevated: "text-primary placeholder:text-primary/60 focus-visible:ring-primary",
-        filled: "text-on-primary placeholder:text-on-primary/60 focus-visible:ring-on-primary",
-        tonal: "text-on-secondary-container placeholder:text-on-secondary-container/60 focus-visible:ring-on-secondary-container",
-        glass: "text-foreground placeholder:text-foreground/60 focus-visible:ring-border",
-        destructive: "text-white placeholder:text-white/60 focus-visible:ring-destructive",
-        gradient: "text-primary-foreground placeholder:text-primary-foreground/60 focus-visible:ring-primary-foreground",
-        fumadocs: "w-0 flex-1 bg-transparent text-lg placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
-
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const commandListVariants = cva(
-  "overflow-y-auto overflow-x-hidden transition-all",
-  {
-    variants: {
-      variant: {
-        default: "h-full max-h-[700px]",
-        framer: "h-full",
-        linear: "min-h-[300px] max-h-[400px] overflow-auto overscroll-contain transition-[height] duration-100",
-        raycast: "px-2 h-[393px] overflow-auto overscroll-contain scroll-pb-10 transition-[height] duration-100 pb-10",
-        vercel: "min-h-[330px] max-h-[400px] overflow-auto overscroll-contain transition-[height] duration-100",
-        elevated: "max-h-[700px]",
-        filled: "max-h-[700px]",
-        tonal: "max-h-[700px]",
-        glass: "max-h-[700px] backdrop-blur-sm",
-        destructive: "max-h-[700px]",
-        gradient: "max-h-[700px]",
-        fumadocs: "w-full flex flex-col overflow-y-auto max-h-[460px] p-1",
-
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const commandItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center px-2 py-1.5 text-sm outline-none transition-all rounded-md aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-  {
-    variants: {
-      variant: {
-        default: "border-l-4 border-transparent hover:bg-accent/50 hover:border-primary aria-selected:border-primary",
-        framer: "rounded-xl text-sm gap-3 text-gray-100 p-2 mr-2 font-medium aria-selected:bg-blue-500 aria-selected:text-white data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed mt-1 first:mt-0 hover:bg-gray-800",
-        linear: "h-12 text-sm gap-3 px-4 text-gray-100 select-none will-change-[background,color] aria-selected:bg-gray-800 aria-selected:after:content-[''] aria-selected:after:absolute aria-selected:after:left-0 aria-selected:after:z-[123] aria-selected:after:w-[3px] aria-selected:after:h-full aria-selected:after:bg-[#5f6ad2] active:bg-gray-700 data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed mt-1 first:mt-0 hover:bg-gray-800/50",
-        raycast: "h-10 rounded-lg text-sm gap-2 px-2 text-gray-100 select-none will-change-[background,color] aria-selected:bg-gray-700 aria-selected:text-gray-100 active:bg-gray-700 data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed first:mt-2 mt-1 hover:bg-gray-800",
-        vercel: "h-12 rounded-lg text-sm gap-2 px-4 text-gray-500 select-none will-change-[background,color] aria-selected:bg-gray-800/50 aria-selected:text-gray-100 active:bg-gray-700 data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed mt-1 first:mt-0 hover:bg-gray-800/30",
-        elevated: "hover:bg-surface-container-high aria-selected:bg-surface-container-high focus-visible:ring-primary",
-        filled: "hover:bg-primary/80 aria-selected:bg-primary/80 focus-visible:ring-on-primary",
-        tonal: "hover:bg-secondary-container/80 aria-selected:bg-secondary-container/80 focus-visible:ring-on-secondary-container",
-        glass: "hover:bg-background/40 aria-selected:bg-background/40 focus-visible:ring-border",
-        destructive: "hover:bg-destructive/80 aria-selected:bg-destructive/80 focus-visible:ring-destructive",
-        gradient: "hover:bg-primary/60 aria-selected:bg-primary/60 focus-visible:ring-primary-foreground",
-        fumadocs: "relative flex select-none flex-row items-center gap-2 p-2 text-start text-sm rounded-lg font-medium bg-transparent aria-selected:bg-accent aria-selected:text-accent-foreground hover:bg-accent/50",
-
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const commandGroupVariants = cva(
-  "overflow-hidden p-1 text-foreground transition-all [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-  {
-    variants: {
-      variant: {
-        default: "",
-        framer: "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:mb-2",
-        linear: "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2",
-        raycast: "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center",
-        vercel: "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center [&_[cmdk-group-heading]]:mb-2 mt-2",
-        elevated: "[&_[cmdk-group-heading]]:text-primary/70",
-        filled: "[&_[cmdk-group-heading]]:text-on-primary/70",
-        tonal: "[&_[cmdk-group-heading]]:text-on-secondary-container/70",
-        glass: "[&_[cmdk-group-heading]]:text-foreground/70",
-        destructive: "[&_[cmdk-group-heading]]:text-white/70",
-        gradient: "[&_[cmdk-group-heading]]:text-primary-foreground/70",
-        fumadocs: "",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-interface CommandContextValue {
-  variant?: 'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | "search" | "elevated" | "filled" | "tonal" | "glass" | "glass" | "destructive" | "gradient" | "fumadocs";
-}
-
-const CommandContext = React.createContext<CommandContextValue>({
-  variant: 'default',
-});
-
-interface CommandProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
-  variant?: 'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | "search" | "elevated" | "filled" | "tonal" | "glass" | "glass" | "destructive" | "gradient" | "fumadocs";
-}
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  CommandProps
->(({ className, variant = 'default', ...props }, ref) => (
-  <CommandContext.Provider value={{ variant }}>
-    <CommandPrimitive
-      ref={ref}
-      className={cn(commandVariants({ variant }), className)}
-      {...props}
-    />
-  </CommandContext.Provider>
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ placeholder = 'Search...', className, ...props }, ref) => {
-  const { variant } = React.useContext(CommandContext);
-
-  return (
-    <div className={cn(commandInputVariants({ variant }))} cmdk-input-wrapper="">
-      <Search className={cn(
-        "shrink-0 opacity-50 ",
-        variant === 'framer' ? "w-5 h-5 text-gray-500" : "mr-2 h-4 w-4"
-      )} />
-      <CommandPrimitive.Input
-        ref={ref}
-        placeholder={placeholder}
-        className={cn("focus:outline-none outline-none focus:border-transparent ring-0 focus:ring-0", commandInputFieldVariants({ variant }), className)}
-        onFocus={(e) => e.target.style.boxShadow = 'none'}
-        {...props}
-      />
-    </div>
-  );
-});
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & { MHList?: string }
->(({ maxHeight = "max-h-[400px]", className, ...props }, ref) => {
-  const { variant } = React.useContext(CommandContext);
-
-  return (
-    <CommandPrimitive.List
-      ref={ref}
-      className={cn(commandListVariants({ variant }), maxHeight, className)}
-      {...props}
-    />
-  );
-});
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => {
-  const { variant } = React.useContext(CommandContext);
-
-  return (
-    <CommandPrimitive.Empty
-      ref={ref}
-      className={cn(
-        "text-center text-sm",
-        variant === 'framer' && "py-8 whitespace-pre-wrap text-gray-500",
-        variant === 'linear' && "text-sm flex items-center justify-center h-16 whitespace-pre-wrap text-gray-500",
-        variant === 'raycast' && "text-sm flex items-center justify-center h-16 whitespace-pre-wrap text-gray-500",
-        variant === 'vercel' && "text-sm flex items-center justify-center h-12 whitespace-pre-wrap text-gray-500"
-      )}
-      {...props}
-    />
-  );
-});
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => {
-  const { variant } = React.useContext(CommandContext);
-
-  return (
-    <CommandPrimitive.Group
-      ref={ref}
-      className={cn(commandGroupVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => {
-  const { variant } = React.useContext(CommandContext);
-
-  return (
-    <CommandPrimitive.Item
-      ref={ref}
-      data-slot="command-item"
-      className={cn(commandItemVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-const CommandSeparator = ({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>) => {
-  const { variant } = React.useContext(CommandContext);
-
-  return (
-    <CommandPrimitive.Separator
-      className={cn(
-        variant === 'framer' && "h-px w-full bg-gray-200 my-1",
-        variant === 'linear' && "h-px w-full bg-gray-200 my-1",
-        variant === 'raycast' && "h-px w-full bg-gray-200 my-1",
-        variant === 'vercel' && "h-px w-full bg-gray-200 my-1",
-        variant === 'default' && "-mx-1 h-px bg-border",
-        className
-      )}
-      {...props}
-    />
-  );
-};
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandDialogButton = ({ variant = 'outline', setOpen, buttonChildren, ...buttonProps }: any) => {
-  return (
-    <Button
-      onClick={() => setOpen(true)}
-      variant={variant}
-      {...buttonProps}
-    >
-      {buttonChildren}
-    </Button>
-  );
-};
-
-const CommandDialog = ({ variant = 'default', buttonType = 'input', buttonChildren, children, ...props }: any) => {
-  const [open, setOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen((open) => !open);
-      }
-    };
-    document.addEventListener("keydown", down);
-    return () => document.removeEventListener("keydown", down);
-  }, []);
-
-  return (
-    <>
-      <CommandDialogButton variant={variant} setOpen={setOpen} buttonChildren={buttonChildren} />
-      <Dialog open={open} onOpenChange={setOpen} {...props}>
-        <DialogContent className="overflow-hidden p-0 shadow-lg">
-          <Command variant={variant}>
-            {children}
-          </Command>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};
-
-const CommandDialogCustom = ({ variant = 'default', children, ...props }: any) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command variant={variant}>
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-  CommandDialogCustom,
-  commandVariants,
-  commandInputVariants,
-  commandInputFieldVariants,
-  commandListVariants,
-  commandItemVariants,
-  commandGroupVariants,
-};

package/components/catalyst-ui/primitives/context-menu.tsx

@@ -1,236 +0,0 @@
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-import { cn } from '~/components/catalyst-ui'
-
-// @dev app/components/catalyst-ui/data/primitive-data.tsx:1769
-
-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 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
-}