feat: add component command

Author: Ohh-889

packages/ui/src/components/command/Command.tsx

@@ -0,0 +1,53 @@
+import { Command as _Command } from 'cmdk';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import CommandEmpty from './CommandEmpty';
+import CommandInput from './CommandInput';
+import CommandList from './CommandList';
+import CommandOption from './CommandOption';
+import CommandRoot from './CommandRoot';
+import type { CommandProps } from './types';
+
+const Command = forwardRef<ComponentRef<typeof CommandRoot>, CommandProps>((props, ref) => {
+  const { className, classNames, empty = 'No results.', inputProps, items, size, ...rest } = props;
+
+  return (
+    <CommandRoot
+      {...rest}
+      className={className || classNames?.root}
+      ref={ref}
+    >
+      <CommandInput
+        classNames={classNames}
+        size={size}
+        {...inputProps}
+      />
+
+      <CommandList
+        className={classNames?.list}
+        size={size}
+      >
+        <CommandEmpty
+          className={classNames?.empty}
+          size={size}
+        >
+          {empty}
+        </CommandEmpty>
+
+        {items.map((item, index) => (
+          <CommandOption
+            classNames={classNames}
+            item={item}
+            key={String(index)}
+            size={size}
+          />
+        ))}
+      </CommandList>
+    </CommandRoot>
+  );
+});
+
+Command.displayName = 'Command';
+
+export default Command;

packages/ui/src/components/command/CommandDialog.tsx

@@ -0,0 +1,30 @@
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot } from '../dialog';
+
+import type { CommandDialogProps } from './types';
+
+const CommandDialog = (props: CommandDialogProps) => {
+  const { children, className, classNames, defaultOpen, onOpenChange, open, ...rest } = props;
+
+  return (
+    <DialogRoot
+      defaultOpen={defaultOpen}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <DialogPortal data-slot="dialog-portal">
+        <DialogOverlay className={classNames?.overlay} />
+
+        <DialogContent
+          {...rest}
+          className={className || classNames?.content}
+        >
+          <DialogClose className={classNames?.close} />
+
+          {children}
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+};
+
+export default CommandDialog;

packages/ui/src/components/command/CommandEmpty.tsx

@@ -0,0 +1,23 @@
+import { CommandEmpty as _CommandEmpty } from 'cmdk';
+
+import { cn } from '@/lib/utils';
+
+import { commandVariants } from './command-variants';
+import type { CommandEmptyProps } from './types';
+
+const CommandEmpty = (props: CommandEmptyProps) => {
+  const { className, size, ...rest } = props;
+
+  const { empty } = commandVariants({ size });
+
+  const mergedClass = cn(empty(), className);
+  return (
+    <_CommandEmpty
+      {...rest}
+      className={mergedClass}
+      data-slot="command-empty"
+    />
+  );
+};
+
+export default CommandEmpty;

packages/ui/src/components/command/CommandGroup.tsx

@@ -0,0 +1,30 @@
+import { CommandGroup as _CommandGroup } from 'cmdk';
+
+import { cn } from '@/lib/utils';
+
+import { commandVariants } from './command-variants';
+import type { CommandGroupProps } from './types';
+
+const CommandGroup = (props: CommandGroupProps) => {
+  const { children, className, classNames, heading, ...rest } = props;
+
+  const { group, groupLabel } = commandVariants();
+
+  const mergedClass = cn(group(), className || classNames?.group);
+
+  const mergedLabelClass = cn(groupLabel(), className || classNames?.groupLabel);
+
+  return (
+    <_CommandGroup
+      {...rest}
+      className={mergedClass}
+      data-slot="command-group"
+    >
+      {heading && <div className={mergedLabelClass}>{heading}</div>}
+
+      {children}
+    </_CommandGroup>
+  );
+};
+
+export default CommandGroup;

packages/ui/src/components/command/CommandInput.tsx

@@ -0,0 +1,39 @@
+import { CommandInput as _CommandInput } from 'cmdk';
+
+import { cn } from '@/lib/utils';
+
+import Icon from '../icon/Icon';
+
+import { commandVariants } from './command-variants';
+import type { CommandInputProps } from './types';
+
+const CommandInput = (props: CommandInputProps) => {
+  const { className, classNames, leading, size, trailing, ...rest } = props;
+
+  const { input, inputIcon, inputWrapper } = commandVariants({ size });
+
+  const mergedClass = cn(input(), className || classNames?.input);
+  const mergedIconClass = cn(inputIcon(), classNames?.inputIcon);
+  const mergedWrapperClass = cn(inputWrapper(), classNames?.inputWrapper);
+
+  return (
+    <div className={mergedWrapperClass}>
+      {leading || (
+        <Icon
+          className={mergedIconClass}
+          icon="lucide:search"
+        />
+      )}
+
+      <_CommandInput
+        {...rest}
+        className={mergedClass}
+        data-slot="command-input"
+      />
+
+      {trailing}
+    </div>
+  );
+};
+
+export default CommandInput;

packages/ui/src/components/command/CommandItem.tsx

@@ -0,0 +1,40 @@
+import { CommandItem as _CommandItem } from 'cmdk';
+import { isValidElement } from 'react';
+
+import { withClassName } from '@/lib/compose-props';
+import { cn } from '@/lib/utils';
+
+import CommandShortcut from './CommandShortcut';
+import { commandVariants } from './command-variants';
+import type { CommandItemProps } from './types';
+
+const CommandItem = (props: CommandItemProps) => {
+  const { children, className, leading, shortcut, size, trailing, ...rest } = props;
+
+  const { item, itemIcon } = commandVariants({ size });
+
+  const mergedClass = cn(item(), className);
+
+  return (
+    <_CommandItem
+      {...rest}
+      className={mergedClass}
+      data-slot="command-item"
+    >
+      {isValidElement(leading) ? withClassName(leading, itemIcon()) : leading}
+
+      <span>{children}</span>
+
+      {trailing}
+
+      {shortcut && (
+        <CommandShortcut
+          size={size}
+          value={shortcut}
+        />
+      )}
+    </_CommandItem>
+  );
+};
+
+export default CommandItem;

packages/ui/src/components/command/CommandList.tsx

@@ -0,0 +1,23 @@
+import { CommandList as _CommandList } from 'cmdk';
+
+import { cn } from '@/lib/utils';
+
+import { commandVariants } from './command-variants';
+import type { CommandListProps } from './types';
+
+const CommandList = (props: CommandListProps) => {
+  const { className, size, ...rest } = props;
+
+  const { list } = commandVariants({ size });
+
+  const mergedClass = cn(list(), className);
+  return (
+    <_CommandList
+      {...rest}
+      className={mergedClass}
+      data-slot="command-list"
+    />
+  );
+};
+
+export default CommandList;

packages/ui/src/components/command/CommandOption.tsx

@@ -0,0 +1,51 @@
+import CommandGroup from './CommandGroup';
+import CommandItem from './CommandItem';
+import CommandSeparator from './CommandSeparator';
+import { isGroup, isSeparator } from './shared';
+import type { CommandOptionProps } from './types';
+
+const CommandOption = (props: CommandOptionProps) => {
+  const { classNames, item, size } = props;
+
+  if (isGroup(item)) {
+    const { children, label, ...rest2 } = item;
+    return (
+      <CommandGroup
+        classNames={classNames}
+        heading={label}
+        {...rest2}
+      >
+        {children.map((child, index) => (
+          <CommandOption
+            classNames={classNames}
+            item={child}
+            key={String(index)}
+            size={size}
+          />
+        ))}
+      </CommandGroup>
+    );
+  }
+
+  if (isSeparator(item)) {
+    return (
+      <CommandSeparator
+        className={classNames?.separator}
+        size={size}
+        {...item}
+      />
+    );
+  }
+
+  return (
+    <CommandItem
+      className={classNames?.item}
+      size={size}
+      {...item}
+    >
+      {item.label}
+    </CommandItem>
+  );
+};
+
+export default CommandOption;

packages/ui/src/components/command/CommandRoot.tsx

@@ -0,0 +1,28 @@
+import { CommandRoot as _CommandRoot } from 'cmdk';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { commandVariants } from './command-variants';
+import type { CommandRootProps } from './types';
+
+const CommandRoot = forwardRef<ComponentRef<typeof _CommandRoot>, CommandRootProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { root } = commandVariants({ size });
+
+  const mergedClass = cn(root(), className);
+  return (
+    <_CommandRoot
+      {...rest}
+      className={mergedClass}
+      data-slot="command-root"
+      ref={ref}
+    />
+  );
+});
+
+CommandRoot.displayName = 'CommandRoot';
+
+export default CommandRoot;

packages/ui/src/components/command/CommandSeparator.tsx

@@ -0,0 +1,23 @@
+import { CommandSeparator as _CommandSeparator } from 'cmdk';
+
+import { cn } from '@/lib/utils';
+
+import { commandVariants } from './command-variants';
+import type { CommandSeparatorProps } from './types';
+
+const CommandSeparator = (props: CommandSeparatorProps) => {
+  const { className, size, ...rest } = props;
+
+  const { separator } = commandVariants({ size });
+
+  const mergedClass = cn(separator(), className);
+  return (
+    <_CommandSeparator
+      {...rest}
+      className={mergedClass}
+      data-slot="command-separator"
+    />
+  );
+};
+
+export default CommandSeparator;