Tweaked command component input styles

.changeset/lovely-papayas-move.md

@@ -0,0 +1,8 @@
+---
+"@utima/ui": minor
+---
+
+UI Updates
+
+- Added `CommandLoader` component
+- Tweaked `Command` input styles

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

@@ -23,7 +23,7 @@ const meta: Meta<typeof Command.Root> = {
       <>
         <Command.Input placeholder='Type a command. or search...' />
         <Command.List>
-          <Command.Empty>No results found.</Command.Empty>
+          <Command.Empty />
           <Command.Group>
             <Command.Item>
               <Calendar className='mr-2 h-4 w-4' />

packages/ui/src/components/command/Command.styles.ts

@@ -12,16 +12,20 @@ export const commandDef = twOverrides(
       command:
         '[&_[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',
     },
-    empty: 'py-6 text-center text-sm',
+    empty: {
+      content:
+        'py-6 text-sm flex items-center justify-center gap-2 animate-in fade-in zoom-in-95',
+      icon: 'size-5',
+    },
     group:
       'overflow-hidden p-1.5 text-fg [&_[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-fg',
     input: {
       wrapper: 'px-1.5 pt-1.5',
       container: 'flex bg-accent/50 rounded items-center px-3',
       icon: 'mr-2 h-4 w-4 shrink-0',
-      loader: 'animate-spin transition-opacity opacity-0 ml-2 h-4 w-4 shrink-0',
+      loader: 'animate-spin transition-opacity opacity-0 ml-2 size-4 shrink-0',
       input:
-        'bg-accent flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-fg disabled:cursor-not-allowed disabled:opacity-50',
+        'bg-accent flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:placeholder disabled:cursor-not-allowed disabled:opacity-50',
     },
     item: 'transition-all cursor-pointer relative flex select-none items-center rounded px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     list: 'max-h-[300px] overflow-y-auto overflow-x-hidden',

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

@@ -1,4 +1,5 @@
 import { Command as CommandPrimitive } from 'cmdk';
+import { PackageSearch } from 'lucide-react';
 import {
   forwardRef,
   type ElementRef,
@@ -11,15 +12,25 @@ import { commandDef } from './Command.styles';
 
 type CommandEmptyProps = ComponentPropsWithoutRef<
   typeof CommandPrimitive.Empty
->;
+> & {
+  hasIcon?: boolean;
+};
 
 export const CommandEmpty = forwardRef<
   ElementRef<typeof CommandPrimitive.Empty>,
   CommandEmptyProps
->(({ className, ...restProps }, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className={cn(commandDef.empty, className)}
-    {...restProps}
-  />
-));
+>(
+  (
+    { className, hasIcon = true, children = 'No results found', ...restProps },
+    ref,
+  ) => (
+    <CommandPrimitive.Empty
+      ref={ref}
+      className={cn(commandDef.empty.content, className)}
+      {...restProps}
+    >
+      {hasIcon && <PackageSearch className={cn(commandDef.empty.icon)} />}
+      {children}
+    </CommandPrimitive.Empty>
+  ),
+);

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

@@ -1,5 +1,5 @@
 import { Command as CommandPrimitive } from 'cmdk';
-import { Loader, Search } from 'lucide-react';
+import { Loader2, Search } from 'lucide-react';
 import {
   forwardRef,
   type ElementRef,
@@ -28,7 +28,7 @@ export const CommandInput = forwardRef<
         className={cn(commandDef.input.input, className)}
         {...restProps}
       />
-      <Loader
+      <Loader2
         className={cn(commandDef.input.loader, loading && 'opacity-100')}
       />
     </div>

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

@@ -0,0 +1,28 @@
+import { Loader2 } from 'lucide-react';
+import { forwardRef, type ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { commandDef } from './Command.styles';
+
+type CommandLoaderProps = ComponentProps<'div'> & {
+  hasIcon?: boolean;
+};
+
+export const CommandLoader = forwardRef<HTMLDivElement, CommandLoaderProps>(
+  (
+    { className, hasIcon = true, children = 'Loading...', ...restProps },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn(commandDef.empty.content, className)}
+      {...restProps}
+    >
+      {hasIcon && (
+        <Loader2 className={cn(commandDef.empty.icon, 'animate-spin')} />
+      )}
+      {children}
+    </div>
+  ),
+);

packages/ui/src/components/command/index.ts

@@ -7,3 +7,4 @@ export { CommandList as List } from './CommandList';
 export { CommandSeparator as Separator } from './CommandSeparator';
 export { CommandShortcut as Shortcut } from './CommandShortcut';
 export { CommandDialog as Dialog } from './CommandDialog';
+export { CommandLoader as Loader } from './CommandLoader';

packages/ui/src/components/popover/Popover.styles.ts

@@ -3,7 +3,7 @@ import { twOverrides } from '@/overrides';
 export const popoverDef = twOverrides(
   {
     content:
-      'z-50 w-72 min-w-[var(--radix-popper-anchor-width)] rounded-md border border-popover-border bg-popover p-4 text-popover-fg shadow-md outline-none 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 w-auto min-w-[var(--radix-popper-anchor-width)] rounded-md border border-popover-border bg-popover p-4 text-popover-fg shadow-md outline-none 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',
   },
   'popover',
 );

packages/ui/src/components/select/SelectElement.tsx

@@ -42,9 +42,9 @@ export const SelectElement = forwardRef<
         )}
         {...restProps}
       >
-        {children}
+        {children ?? <span />}
         <Icon asChild>
-          <ChevronDown size={16} />
+          <ChevronDown className='shrink-0' size={16} />
         </Icon>
       </Comp>
     );