Command

"use client";
 
import { Autocomplete, Keyboard, useFilter } from "react-aria-components";
import {
  DropdownMenu,
  type DropdownMenuContentProps,
  type DropdownMenuGroupProps,
  type DropdownMenuHeaderProps,
  type DropdownMenuItemProps,
  type DropdownMenuSeparatorProps,
} from "../dropdown-menu";
import { CommandStyles } from "./styles";
 
export interface CommandRootProps
  extends React.ComponentProps<typeof Autocomplete> {
  filterOptions?: Parameters<typeof useFilter>[0];
}
 
export function CommandRoot({
  filter,
  filterOptions,
  ...props
}: CommandRootProps) {
  const { contains } = useFilter({ sensitivity: "base", ...filterOptions });
 
  return <Autocomplete filter={filter ?? contains} {...props} />;
}
 
export interface CommandListProps<T extends object>
  extends DropdownMenuContentProps<T> {}
 
export function CommandList<T extends object>(props: CommandListProps<T>) {
  return <DropdownMenu.Content {...props} />;
}
 
export interface CommandHeaderProps extends DropdownMenuHeaderProps {}
 
export function CommandHeader({ className, ...props }: CommandHeaderProps) {
  return (
    <DropdownMenu.Header
      {...props}
      className={CommandStyles.Header({ className })}
    />
  );
}
 
export interface CommandItemProps<T extends object>
  extends DropdownMenuItemProps<T> {}
 
export function CommandItem<T extends object>(props: CommandItemProps<T>) {
  return <DropdownMenu.Item {...props} data-slot="command-item" />;
}
 
export interface CommandGroupProps extends DropdownMenuGroupProps {}
export const CommandGroup = DropdownMenu.Group;
 
export interface CommandEmptyProps extends React.ComponentProps<"div"> {}
 
export function CommandEmpty({ className, ...props }: CommandEmptyProps) {
  return (
    <div
      role="presentation"
      {...props}
      className={CommandStyles.Empty({ className })}
    />
  );
}
 
export interface CommandSeparatorProps extends DropdownMenuSeparatorProps {}
export const CommandSeparator = DropdownMenu.Separator;
 
export interface CommandShortcutProps
  extends React.ComponentProps<typeof Keyboard> {}
export function CommandShortcut({ className, ...props }: CommandShortcutProps) {
  return (
    <Keyboard {...props} className={CommandStyles.Shortcut({ className })} />
  );
}

export * from "./command";
export * as Command from "./namespace";

export {
  CommandRoot as Root,
  CommandList as List,
  CommandHeader as Header,
  CommandItem as Item,
  CommandGroup as Group,
  CommandEmpty as Empty,
  CommandSeparator as Separator,
  CommandShortcut as Shortcut,
} from "./command";

import { cva } from "~/lib/cva";
import { DropdownMenuStyles } from "../dropdown-menu";
 
export const CommandStyles = {
  Header: (props?: { className?: string }) =>
    DropdownMenuStyles.Header({
      className: ["font-medium text-muted-fg text-xs", props?.className],
    }),
  Empty: cva({
    base: ["p-4 text-center text-muted-fg text-sm"],
  }),
  Shortcut: cva({
    base: ["ml-auto text-muted-fg text-xs tracking-widest"],
  }),
  // Root: cva({
  //   base: [
  //     "flex w-full flex-col overflow-hidden rounded-md bg-popover text-popover-fg",
  //   ],
  // }),
  // Dialog: cva({
  //   base: [
  //     "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-fg [&_[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",
  //   ],
  // }),
  // Input: cva({
  //   base: [
  //     "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden",
  //     "placeholder:text-muted-fg",
  //     "disabled:cursor-not-allowed disabled:opacity-50",
  //   ],
  // }),
  // List: cva({
  //   base: ["max-h-[300px] overflow-y-auto overflow-x-hidden"],
  // }),
  // Group: cva({
  //   base: [
  //     "overflow-hidden p-1 text-fg",
  //     "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium",
  //     "[&_[cmdk-group-heading]]:text-muted-fg [&_[cmdk-group-heading]]:text-xs",
  //   ],
  // }),
  // Separator: cva({
  //   base: ["-mx-1 my-1 h-px bg-border"],
  // }),
};