spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/ui/command.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import * as React from "react"18import { type DialogProps } from "@radix-ui/react-dialog"19import { Command as CommandPrimitive } from "cmdk"20import { Search } from "lucide-react"2122import { cn } from "@/lib/utils"23import { Dialog, DialogContent } from "@/components/ui/dialog"2425const Command = React.forwardRef<26  React.ElementRef<typeof CommandPrimitive>,27  React.ComponentPropsWithoutRef<typeof CommandPrimitive>28>(({ className, ...props }, ref) => (29  <CommandPrimitive30    ref={ref}31    className={cn(32      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",33      className34    )}35    {...props}36  />37))38Command.displayName = CommandPrimitive.displayName3940const CommandDialog = ({ children, ...props }: DialogProps) => {41  return (42    <Dialog {...props}>43      <DialogContent className="overflow-hidden p-0 shadow-lg">44        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">45          {children}46        </Command>47      </DialogContent>48    </Dialog>49  )50}5152const CommandInput = React.forwardRef<53  React.ElementRef<typeof CommandPrimitive.Input>,54  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>55>(({ className, ...props }, ref) => (56  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">57    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />58    <CommandPrimitive.Input59      ref={ref}60      className={cn(61        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",62        className63      )}64      {...props}65    />66  </div>67))6869CommandInput.displayName = CommandPrimitive.Input.displayName7071const CommandList = React.forwardRef<72  React.ElementRef<typeof CommandPrimitive.List>,73  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>74>(({ className, ...props }, ref) => (75  <CommandPrimitive.List76    ref={ref}77    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}78    {...props}79  />80))8182CommandList.displayName = CommandPrimitive.List.displayName8384const CommandEmpty = React.forwardRef<85  React.ElementRef<typeof CommandPrimitive.Empty>,86  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>87>((props, ref) => (88  <CommandPrimitive.Empty89    ref={ref}90    className="py-6 text-center text-sm"91    {...props}92  />93))9495CommandEmpty.displayName = CommandPrimitive.Empty.displayName9697const CommandGroup = React.forwardRef<98  React.ElementRef<typeof CommandPrimitive.Group>,99  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>100>(({ className, ...props }, ref) => (101  <CommandPrimitive.Group102    ref={ref}103    className={cn(104      "overflow-hidden p-1 text-foreground [&_[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",105      className106    )}107    {...props}108  />109))110111CommandGroup.displayName = CommandPrimitive.Group.displayName112113const CommandSeparator = React.forwardRef<114  React.ElementRef<typeof CommandPrimitive.Separator>,115  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>116>(({ className, ...props }, ref) => (117  <CommandPrimitive.Separator118    ref={ref}119    className={cn("-mx-1 h-px bg-border", className)}120    {...props}121  />122))123CommandSeparator.displayName = CommandPrimitive.Separator.displayName124125const CommandItem = React.forwardRef<126  React.ElementRef<typeof CommandPrimitive.Item>,127  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>128>(({ className, ...props }, ref) => (129  <CommandPrimitive.Item130    ref={ref}131    className={cn(132      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",133      className134    )}135    {...props}136  />137))138139CommandItem.displayName = CommandPrimitive.Item.displayName140141const CommandShortcut = ({142  className,143  ...props144}: React.HTMLAttributes<HTMLSpanElement>) => {145  return (146    <span147      className={cn(148        "ml-auto text-xs tracking-widest text-muted-foreground",149        className150      )}151      {...props}152    />153  )154}155CommandShortcut.displayName = "CommandShortcut"156157export {158  Command,159  CommandDialog,160  CommandInput,161  CommandList,162  CommandEmpty,163  CommandGroup,164  CommandItem,165  CommandShortcut,166  CommandSeparator,167}168