@vvedantb/ui 0.17.0 → 0.18.0

package/src/ui/command.tsx

@@ -8,21 +8,53 @@ import {
   DialogHeader,
   DialogTitle,
 } from "./dialog";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+
+/** App defaults for `Command*` (see `UiConfigProvider`). */
+export interface CommandConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    root?: string;
+    /** `CommandDialog` content. */
+    dialogContent?: string;
+    /** The `Command` inside `CommandDialog`, for every `listLayout`. */
+    dialogCommand?: string;
+    inputWrapper?: string;
+    input?: string;
+    list?: string;
+    empty?: string;
+    group?: string;
+    separator?: string;
+    item?: string;
+    shortcut?: string;
+  };
+  /** Replace the built-in icons. */
+  icons?: {
+    /** `CommandInput` search icon. */
+    search?: React.ReactNode;
+  };
+  /** A `className` on `CommandEmpty` replaces its classes instead of merging with them. */
+  emptyClassNameReplaces?: boolean;
+}
 
 const Command = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-lg bg-overlay text-overlay-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const root = useUiConfig("Command")?.classes?.root;
+  const merge = useCn();
+  return (
+    <CommandPrimitive
+      ref={ref}
+      className={merge(
+        root ??
+          "flex h-full w-full flex-col overflow-hidden rounded-lg bg-overlay text-overlay-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 Command.displayName = CommandPrimitive.displayName;
 
 // The list is pinned rather than `max-h`: a palette that resizes on every
@@ -56,9 +88,11 @@ function CommandDialog({
   listLayout = "pinned",
   ...props
 }: CommandDialogProps) {
+  const classes = useUiConfig("Command")?.classes;
+  const merge = useCn();
   return (
     <Dialog {...props}>
-      <DialogContent className={cn("overflow-hidden p-0 sm:max-w-xl", className)}>
+      <DialogContent className={merge(classes?.dialogContent ?? "overflow-hidden p-0 sm:max-w-xl", className)}>
         {title !== undefined || description !== undefined ? (
           <DialogHeader className="sr-only">
             <DialogTitle>{title}</DialogTitle>
@@ -67,7 +101,10 @@ function CommandDialog({
         ) : null}
         <Command
           shouldFilter={shouldFilter}
-          className={listLayout === "auto" ? commandDialogAutoClass : commandDialogPinnedClass}
+          className={
+            classes?.dialogCommand ??
+            (listLayout === "auto" ? commandDialogAutoClass : commandDialogPinnedClass)
+          }
         >
           {children}
         </Command>
@@ -79,97 +116,133 @@ function CommandDialog({
 const CommandInput = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div
-    className="flex items-center border-b border-separator px-3.5"
-    cmdk-input-wrapper=""
-  >
-    <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" stroke={1.5} />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
+>(({ className, ...props }, ref) => {
+  const config = useUiConfig("Command");
+  const merge = useCn();
+  return (
+    <div
+      className={config?.classes?.inputWrapper ?? "flex items-center border-b border-separator px-3.5"}
+      cmdk-input-wrapper=""
+    >
+      {config?.icons?.search ?? (
+        <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" stroke={1.5} />
       )}
-      {...props}
-    />
-  </div>
-));
+      <CommandPrimitive.Input
+        ref={ref}
+        className={merge(
+          config?.classes?.input ??
+            "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-80 overflow-y-auto overflow-x-hidden pb-2", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const list = useUiConfig("Command")?.classes?.list;
+  const merge = useCn();
+  return (
+    <CommandPrimitive.List
+      ref={ref}
+      className={merge(list ?? "max-h-80 overflow-y-auto overflow-x-hidden pb-2", className)}
+      {...props}
+    />
+  );
+});
 CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className={cn("py-8 text-center text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const config = useUiConfig("Command");
+  const merge = useCn();
+  const classes = config?.classes?.empty ?? "py-8 text-center text-sm text-muted-foreground";
+  return (
+    <CommandPrimitive.Empty
+      ref={ref}
+      className={
+        config?.emptyClassNameReplaces && className !== undefined
+          ? className
+          : merge(classes, className)
+      }
+      {...props}
+    />
+  );
+});
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.Group>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const group = useUiConfig("Command")?.classes?.group;
+  const merge = useCn();
+  return (
+    <CommandPrimitive.Group
+      ref={ref}
+      className={merge(
+        group ??
+          "overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1.5 h-px bg-separator", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const separator = useUiConfig("Command")?.classes?.separator;
+  const merge = useCn();
+  return (
+    <CommandPrimitive.Separator
+      ref={ref}
+      className={merge(separator ?? "-mx-1.5 h-px bg-separator", className)}
+      {...props}
+    />
+  );
+});
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-menu-item px-2.5 py-2 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[selected=true]:bg-surface-tertiary/80 data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const item = useUiConfig("Command")?.classes?.item;
+  const merge = useCn();
+  return (
+    <CommandPrimitive.Item
+      ref={ref}
+      className={merge(
+        item ??
+          "relative flex cursor-default gap-2 select-none items-center rounded-menu-item px-2.5 py-2 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[selected=true]:bg-surface-tertiary/80 data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 function CommandShortcut({
   className,
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) {
+  const shortcut = useUiConfig("Command")?.classes?.shortcut;
+  const merge = useCn();
   return (
     <span
-      className={cn("ml-auto text-xs tracking-wide text-muted-foreground/90", className)}
+      className={merge(shortcut ?? "ml-auto text-xs tracking-wide text-muted-foreground/90", className)}
       {...props}
     />
   );

package/src/ui/context-menu.tsx

@@ -5,7 +5,6 @@ import {
   IconChevronRight,
   IconCircleFilled,
 } from "@tabler/icons-react";
-import { cn } from "../utils/cn";
 import {
   menuCheckboxRadioItemClass,
   menuContentClass,
@@ -15,10 +14,34 @@ import {
   menuShortcutClass,
   menuSubTriggerClass,
 } from "./_menu-classes";
-import { MenuItemRow, SubTriggerRow, suppressAltKeyDown } from "./_menu-parts";
+import {
+  type MenuConfig,
+  MenuItemRow,
+  SubTriggerRow,
+  suppressAltKeyDown,
+} from "./_menu-parts";
+import { useCn, useUiConfig } from "./ui-config";
+
+/** App defaults for `ContextMenu*` (see `UiConfigProvider`). */
+export interface ContextMenuConfig extends MenuConfig {
+  /** Default for `ContextMenuSubContent` `portal`. */
+  subContentPortal?: boolean;
+}
 
 const ContextMenu = ContextMenuPrimitive.Root;
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuTrigger = React.forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>
+>((props, ref) => {
+  const trigger = useUiConfig("ContextMenu")?.classes?.trigger;
+  const merge = useCn();
+  // Without config, pass props untouched: Radix's Slot turns an explicit
+  // `className={undefined}` into `class=""`.
+  if (trigger === undefined) return <ContextMenuPrimitive.Trigger ref={ref} {...props} />;
+  const { className, ...rest } = props;
+  return <ContextMenuPrimitive.Trigger ref={ref} className={merge(trigger, className)} {...rest} />;
+});
+ContextMenuTrigger.displayName = ContextMenuPrimitive.Trigger.displayName;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
@@ -31,30 +54,46 @@ const ContextMenuSubTrigger = React.forwardRef<
     /** Leading icon or mark. The label then fills the row. */
     startContent?: React.ReactNode;
   }
->(({ className, inset, startContent, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(menuSubTriggerClass, inset && "pl-8", className)}
-    {...props}
-  >
-    {startContent === undefined ? children : (
-      <SubTriggerRow startContent={startContent}>{children}</SubTriggerRow>
-    )}
-    <IconChevronRight className="ml-auto" />
-  </ContextMenuPrimitive.SubTrigger>
-));
+>(({ className, inset, startContent, children, ...props }, ref) => {
+  const classes = useUiConfig("ContextMenu")?.classes;
+  const merge = useCn();
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={merge(classes?.subTrigger ?? menuSubTriggerClass, inset && "pl-8", className)}
+      {...props}
+    >
+      {startContent === undefined ? children : (
+        <SubTriggerRow startContent={startContent}>{children}</SubTriggerRow>
+      )}
+      <IconChevronRight className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+});
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(menuContentClass, "w-40", className)}
-    {...props}
-  />
-));
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
+    /** Render into `document.body` so a clipping parent cannot cut it off. */
+    portal?: boolean;
+  }
+>(({ className, portal, ...props }, ref) => {
+  const config = useUiConfig("ContextMenu");
+  const merge = useCn();
+  const content = (
+    <ContextMenuPrimitive.SubContent
+      ref={ref}
+      className={merge(config?.classes?.subContent ?? [menuContentClass, "w-40"], className)}
+      {...props}
+    />
+  );
+  return (portal ?? config?.subContentPortal) ? (
+    <ContextMenuPrimitive.Portal>{content}</ContextMenuPrimitive.Portal>
+  ) : (
+    content
+  );
+});
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
@@ -63,16 +102,21 @@ const ContextMenuContent = React.forwardRef<
     /** Stop a bare Alt press from moving focus (e.g. into the browser menu bar). */
     suppressAltKey?: boolean;
   }
->(({ className, suppressAltKey, onKeyDown, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(menuContentClass, "w-40", className)}
-      onKeyDown={suppressAltKey ? suppressAltKeyDown(onKeyDown) : onKeyDown}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
+>(({ className, suppressAltKey, collisionPadding, onKeyDown, ...props }, ref) => {
+  const config = useUiConfig("ContextMenu");
+  const merge = useCn();
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        collisionPadding={collisionPadding ?? config?.collisionPadding}
+        className={merge(config?.classes?.content ?? [menuContentClass, "w-40"], className)}
+        onKeyDown={suppressAltKey ? suppressAltKeyDown(onKeyDown) : onKeyDown}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
@@ -90,63 +134,75 @@ const ContextMenuItem = React.forwardRef<
   (
     { className, inset, startContent, description, endContent, children, asChild, ...props },
     ref,
-  ) => (
-    <ContextMenuPrimitive.Item
-      ref={ref}
-      asChild={asChild}
-      className={cn(menuItemClass, inset && "pl-8", className)}
-      {...props}
-    >
-      {asChild || (startContent === undefined && description === undefined && endContent === undefined) ? (
-        children
-      ) : (
-        <MenuItemRow startContent={startContent} description={description} endContent={endContent}>
-          {children}
-        </MenuItemRow>
-      )}
-    </ContextMenuPrimitive.Item>
-  ),
+  ) => {
+    const item = useUiConfig("ContextMenu")?.classes?.item;
+    const merge = useCn();
+    return (
+      <ContextMenuPrimitive.Item
+        ref={ref}
+        asChild={asChild}
+        className={merge(item ?? menuItemClass, inset && "pl-8", className)}
+        {...props}
+      >
+        {asChild || (startContent === undefined && description === undefined && endContent === undefined) ? (
+          children
+        ) : (
+          <MenuItemRow startContent={startContent} description={description} endContent={endContent}>
+            {children}
+          </MenuItemRow>
+        )}
+      </ContextMenuPrimitive.Item>
+    );
+  },
 );
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(menuCheckboxRadioItemClass, className)}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <IconCheck className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
+>(({ className, children, checked, ...props }, ref) => {
+  const config = useUiConfig("ContextMenu");
+  const merge = useCn();
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={merge(config?.classes?.checkboxItem ?? menuCheckboxRadioItemClass, className)}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          {config?.icons?.check ?? <IconCheck className="h-4 w-4" />}
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+});
 ContextMenuCheckboxItem.displayName =
   ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(menuCheckboxRadioItemClass, className)}
-    {...props}
-  >
-    <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <IconCircleFilled className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
+>(({ className, children, ...props }, ref) => {
+  const config = useUiConfig("ContextMenu");
+  const merge = useCn();
+  return (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      className={merge(config?.classes?.radioItem ?? menuCheckboxRadioItemClass, className)}
+      {...props}
+    >
+      <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          {config?.icons?.radio ?? <IconCircleFilled className="h-2 w-2 fill-current" />}
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+});
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
@@ -154,32 +210,42 @@ const ContextMenuLabel = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean;
   }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(menuLabelClass, inset && "pl-8", className)}
-    {...props}
-  />
-));
+>(({ className, inset, ...props }, ref) => {
+  const label = useUiConfig("ContextMenu")?.classes?.label;
+  const merge = useCn();
+  return (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={merge(label ?? menuLabelClass, inset && "pl-8", className)}
+      {...props}
+    />
+  );
+});
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn(menuSeparatorClass, className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const separator = useUiConfig("ContextMenu")?.classes?.separator;
+  const merge = useCn();
+  return (
+    <ContextMenuPrimitive.Separator
+      ref={ref}
+      className={merge(separator ?? menuSeparatorClass, className)}
+      {...props}
+    />
+  );
+});
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn(menuShortcutClass, className)} {...props} />;
+  const shortcut = useUiConfig("ContextMenu")?.classes?.shortcut;
+  const merge = useCn();
+  return <span className={merge(shortcut ?? menuShortcutClass, className)} {...props} />;
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";