@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/primitives/command.tsx

@@ -0,0 +1,393 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "~/components/catalyst-ui";
+import { Dialog, DialogContent } from "~/components/catalyst-ui";
+import { Button } from "~/components/catalyst-ui";
+import React from "react";
+
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:2631
+const commandVariants = cva(
+  "flex h-full w-full flex-col overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-all",
+  {
+    variants: {
+      variant: {
+        default: "bg-popover text-popover-foreground border border-border shadow-xs",
+        framer: "max-w-[640px] w-full p-2 bg-gray-900 rounded-2xl border border-gray-200 shadow-lg font-sans hover:shadow-xl",
+        linear: "max-w-[640px] w-full bg-gradient-to-br from-[#27282b] to-[#2d2e31] rounded-lg overflow-hidden p-0 font-sans shadow-lg hover:shadow-xl",
+        raycast: "max-w-[640px] w-full bg-gray-900 rounded-xl py-2 font-sans shadow-lg border border-gray-700 relative hover:shadow-xl",
+        vercel: "max-w-[640px] w-full p-2 bg-[rgba(22,22,22,0.7)] rounded-xl overflow-hidden font-sans border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl",
+        search: "w-full rounded-2xl border shadow-2xl border-zinc-800 bg-zinc-900 hover:shadow-3xl",
+        elevated: "bg-surface-container-low text-primary shadow-md hover:shadow-lg active:shadow-sm",
+        filled: "bg-primary text-on-primary shadow-sm hover:shadow-md active:shadow-sm",
+        tonal: "bg-secondary-container text-on-secondary-container hover:shadow-sm active:shadow-none",
+        glass: "bg-background/20 backdrop-blur-md border border-border/50 text-foreground hover:bg-background/30 shadow-lg",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        gradient: "bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-md hover:shadow-lg active:shadow-sm",
+        fumadocs: "w-full divide-y divide-border rounded-2xl border bg-popover/60 backdrop-blur-xl text-popover-foreground shadow-2xl shadow-black/40 overflow-hidden",
+
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const commandInputVariants = cva(
+  "flex items-center border-b px-3 transition-all",
+  {
+    variants: {
+      variant: {
+        default: "",
+        framer: "h-12 gap-2 border-gray-200 mb-3 pb-2",
+        linear: "p-0 border-gray-200",
+        raycast: "border-0 px-4",
+        vercel: "border-gray-200 px-2 mb-4",
+        elevated: "border-primary/20",
+        filled: "border-on-primary/20",
+        tonal: "border-on-secondary-container/20",
+        glass: "border-border/30",
+        destructive: "border-destructive/20",
+        gradient: "border-primary-foreground/20",
+        fumadocs: "flex flex-row items-center gap-2 p-3 pb-2 border-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const commandInputFieldVariants = cva(
+  "flex w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+  {
+    variants: {
+      variant: {
+        default: "h-11",
+        framer: "h-auto text-base border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 focus-visible:ring-blue-500",
+        linear: "h-auto text-lg p-5 border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 rounded-none m-0 caret-[#6e5ed2] focus-visible:ring-[#6e5ed2]",
+        raycast: "h-auto text-[15px] py-2 px-4 border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 focus-visible:ring-gray-400",
+        vercel: "h-auto text-[17px] py-2 px-2 pb-4 border-none font-sans bg-transparent text-gray-100 placeholder:text-gray-500 rounded-none focus-visible:ring-gray-400",
+        elevated: "text-primary placeholder:text-primary/60 focus-visible:ring-primary",
+        filled: "text-on-primary placeholder:text-on-primary/60 focus-visible:ring-on-primary",
+        tonal: "text-on-secondary-container placeholder:text-on-secondary-container/60 focus-visible:ring-on-secondary-container",
+        glass: "text-foreground placeholder:text-foreground/60 focus-visible:ring-border",
+        destructive: "text-white placeholder:text-white/60 focus-visible:ring-destructive",
+        gradient: "text-primary-foreground placeholder:text-primary-foreground/60 focus-visible:ring-primary-foreground",
+        fumadocs: "w-0 flex-1 bg-transparent text-lg placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
+
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const commandListVariants = cva(
+  "overflow-y-auto overflow-x-hidden transition-all",
+  {
+    variants: {
+      variant: {
+        default: "h-full max-h-[700px]",
+        framer: "h-full",
+        linear: "min-h-[300px] max-h-[400px] overflow-auto overscroll-contain transition-[height] duration-100",
+        raycast: "px-2 h-[393px] overflow-auto overscroll-contain scroll-pb-10 transition-[height] duration-100 pb-10",
+        vercel: "min-h-[330px] max-h-[400px] overflow-auto overscroll-contain transition-[height] duration-100",
+        elevated: "max-h-[700px]",
+        filled: "max-h-[700px]",
+        tonal: "max-h-[700px]",
+        glass: "max-h-[700px] backdrop-blur-sm",
+        destructive: "max-h-[700px]",
+        gradient: "max-h-[700px]",
+        fumadocs: "w-full flex flex-col overflow-y-auto max-h-[460px] p-1",
+
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const commandItemVariants = cva(
+  "relative flex cursor-pointer select-none items-center px-2 py-1.5 text-sm outline-none transition-all rounded-md aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+  {
+    variants: {
+      variant: {
+        default: "border-l-4 border-transparent hover:bg-accent/50 hover:border-primary aria-selected:border-primary",
+        framer: "rounded-xl text-sm gap-3 text-gray-100 p-2 mr-2 font-medium aria-selected:bg-blue-500 aria-selected:text-white data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed mt-1 first:mt-0 hover:bg-gray-800",
+        linear: "h-12 text-sm gap-3 px-4 text-gray-100 select-none will-change-[background,color] aria-selected:bg-gray-800 aria-selected:after:content-[''] aria-selected:after:absolute aria-selected:after:left-0 aria-selected:after:z-[123] aria-selected:after:w-[3px] aria-selected:after:h-full aria-selected:after:bg-[#5f6ad2] active:bg-gray-700 data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed mt-1 first:mt-0 hover:bg-gray-800/50",
+        raycast: "h-10 rounded-lg text-sm gap-2 px-2 text-gray-100 select-none will-change-[background,color] aria-selected:bg-gray-700 aria-selected:text-gray-100 active:bg-gray-700 data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed first:mt-2 mt-1 hover:bg-gray-800",
+        vercel: "h-12 rounded-lg text-sm gap-2 px-4 text-gray-500 select-none will-change-[background,color] aria-selected:bg-gray-800/50 aria-selected:text-gray-100 active:bg-gray-700 data-[disabled=true]:text-gray-400 data-[disabled=true]:cursor-not-allowed mt-1 first:mt-0 hover:bg-gray-800/30",
+        elevated: "hover:bg-surface-container-high aria-selected:bg-surface-container-high focus-visible:ring-primary",
+        filled: "hover:bg-primary/80 aria-selected:bg-primary/80 focus-visible:ring-on-primary",
+        tonal: "hover:bg-secondary-container/80 aria-selected:bg-secondary-container/80 focus-visible:ring-on-secondary-container",
+        glass: "hover:bg-background/40 aria-selected:bg-background/40 focus-visible:ring-border",
+        destructive: "hover:bg-destructive/80 aria-selected:bg-destructive/80 focus-visible:ring-destructive",
+        gradient: "hover:bg-primary/60 aria-selected:bg-primary/60 focus-visible:ring-primary-foreground",
+        fumadocs: "relative flex select-none flex-row items-center gap-2 p-2 text-start text-sm rounded-lg font-medium bg-transparent aria-selected:bg-accent aria-selected:text-accent-foreground hover:bg-accent/50",
+
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const commandGroupVariants = cva(
+  "overflow-hidden p-1 text-foreground transition-all [&_[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",
+  {
+    variants: {
+      variant: {
+        default: "",
+        framer: "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:mb-2",
+        linear: "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2",
+        raycast: "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center",
+        vercel: "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center [&_[cmdk-group-heading]]:mb-2 mt-2",
+        elevated: "[&_[cmdk-group-heading]]:text-primary/70",
+        filled: "[&_[cmdk-group-heading]]:text-on-primary/70",
+        tonal: "[&_[cmdk-group-heading]]:text-on-secondary-container/70",
+        glass: "[&_[cmdk-group-heading]]:text-foreground/70",
+        destructive: "[&_[cmdk-group-heading]]:text-white/70",
+        gradient: "[&_[cmdk-group-heading]]:text-primary-foreground/70",
+        fumadocs: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+interface CommandContextValue {
+  variant?: 'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | "search" | "elevated" | "filled" | "tonal" | "glass" | "glass" | "destructive" | "gradient" | "fumadocs";
+}
+
+const CommandContext = React.createContext<CommandContextValue>({
+  variant: 'default',
+});
+
+interface CommandProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  variant?: 'default' | 'framer' | 'linear' | 'raycast' | 'vercel' | "search" | "elevated" | "filled" | "tonal" | "glass" | "glass" | "destructive" | "gradient" | "fumadocs";
+}
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  CommandProps
+>(({ className, variant = 'default', ...props }, ref) => (
+  <CommandContext.Provider value={{ variant }}>
+    <CommandPrimitive
+      ref={ref}
+      className={cn(commandVariants({ variant }), className)}
+      {...props}
+    />
+  </CommandContext.Provider>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ placeholder = 'Search...', className, ...props }, ref) => {
+  const { variant } = React.useContext(CommandContext);
+
+  return (
+    <div className={cn(commandInputVariants({ variant }))} cmdk-input-wrapper="">
+      <Search className={cn(
+        "shrink-0 opacity-50 ",
+        variant === 'framer' ? "w-5 h-5 text-gray-500" : "mr-2 h-4 w-4"
+      )} />
+      <CommandPrimitive.Input
+        ref={ref}
+        placeholder={placeholder}
+        className={cn("focus:outline-none outline-none focus:border-transparent ring-0 focus:ring-0", commandInputFieldVariants({ variant }), className)}
+        onFocus={(e) => e.target.style.boxShadow = 'none'}
+        {...props}
+      />
+    </div>
+  );
+});
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & { MHList?: string }
+>(({ maxHeight = "max-h-[400px]", className, ...props }, ref) => {
+  const { variant } = React.useContext(CommandContext);
+
+  return (
+    <CommandPrimitive.List
+      ref={ref}
+      className={cn(commandListVariants({ variant }), maxHeight, className)}
+      {...props}
+    />
+  );
+});
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => {
+  const { variant } = React.useContext(CommandContext);
+
+  return (
+    <CommandPrimitive.Empty
+      ref={ref}
+      className={cn(
+        "text-center text-sm",
+        variant === 'framer' && "py-8 whitespace-pre-wrap text-gray-500",
+        variant === 'linear' && "text-sm flex items-center justify-center h-16 whitespace-pre-wrap text-gray-500",
+        variant === 'raycast' && "text-sm flex items-center justify-center h-16 whitespace-pre-wrap text-gray-500",
+        variant === 'vercel' && "text-sm flex items-center justify-center h-12 whitespace-pre-wrap text-gray-500"
+      )}
+      {...props}
+    />
+  );
+});
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => {
+  const { variant } = React.useContext(CommandContext);
+
+  return (
+    <CommandPrimitive.Group
+      ref={ref}
+      className={cn(commandGroupVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  const { variant } = React.useContext(CommandContext);
+
+  return (
+    <CommandPrimitive.Item
+      ref={ref}
+      data-slot="command-item"
+      className={cn(commandItemVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+const CommandSeparator = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>) => {
+  const { variant } = React.useContext(CommandContext);
+
+  return (
+    <CommandPrimitive.Separator
+      className={cn(
+        variant === 'framer' && "h-px w-full bg-gray-200 my-1",
+        variant === 'linear' && "h-px w-full bg-gray-200 my-1",
+        variant === 'raycast' && "h-px w-full bg-gray-200 my-1",
+        variant === 'vercel' && "h-px w-full bg-gray-200 my-1",
+        variant === 'default' && "-mx-1 h-px bg-border",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandDialogButton = ({ variant = 'outline', setOpen, buttonChildren, ...buttonProps }: any) => {
+  return (
+    <Button
+      onClick={() => setOpen(true)}
+      variant={variant}
+      {...buttonProps}
+    >
+      {buttonChildren}
+    </Button>
+  );
+};
+
+const CommandDialog = ({ variant = 'default', buttonType = 'input', buttonChildren, children, ...props }: any) => {
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  return (
+    <>
+      <CommandDialogButton variant={variant} setOpen={setOpen} buttonChildren={buttonChildren} />
+      <Dialog open={open} onOpenChange={setOpen} {...props}>
+        <DialogContent className="overflow-hidden p-0 shadow-lg">
+          <Command variant={variant}>
+            {children}
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+const CommandDialogCustom = ({ variant = 'default', children, ...props }: any) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command variant={variant}>
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+  CommandDialogCustom,
+  commandVariants,
+  commandInputVariants,
+  commandInputFieldVariants,
+  commandListVariants,
+  commandItemVariants,
+  commandGroupVariants,
+};

package/dist/components/catalyst-ui/primitives/context-menu.tsx

@@ -0,0 +1,236 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { cn } from '~/components/catalyst-ui'
+
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:1769
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {  ContextMenu,  ContextMenuTrigger,  ContextMenuContent,  ContextMenuItem,  ContextMenuCheckboxItem,  ContextMenuRadioItem,  ContextMenuLabel,  ContextMenuSeparator, ContextMenuShortcut,  ContextMenuGroup,  ContextMenuPortal,  ContextMenuSub,  ContextMenuSubContent,  ContextMenuSubTrigger,  ContextMenuRadioGroup
+}