@copilotkit/react-core 1.54.1 → 1.55.0-next.8

package/src/v2/components/chat/__tests__/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/src/v2/components/chat/index.ts

@@ -0,0 +1,79 @@
+export {
+  default as CopilotChatInput,
+  type CopilotChatInputProps,
+  type ToolsMenuItem,
+} from "./CopilotChatInput";
+
+export {
+  default as CopilotChatAssistantMessage,
+  type CopilotChatAssistantMessageProps,
+} from "./CopilotChatAssistantMessage";
+
+export {
+  default as CopilotChatUserMessage,
+  type CopilotChatUserMessageProps,
+} from "./CopilotChatUserMessage";
+
+export {
+  default as CopilotChatReasoningMessage,
+  type CopilotChatReasoningMessageProps,
+} from "./CopilotChatReasoningMessage";
+
+export {
+  CopilotChatAudioRecorder,
+  type AudioRecorderState,
+  AudioRecorderError,
+} from "./CopilotChatAudioRecorder";
+
+export {
+  default as CopilotChatSuggestionPill,
+  type CopilotChatSuggestionPillProps,
+} from "./CopilotChatSuggestionPill";
+
+export {
+  default as CopilotChatSuggestionView,
+  type CopilotChatSuggestionViewProps,
+} from "./CopilotChatSuggestionView";
+
+export {
+  default as CopilotChatMessageView,
+  type CopilotChatMessageViewProps,
+} from "./CopilotChatMessageView";
+
+export {
+  default as CopilotChatToolCallsView,
+  type CopilotChatToolCallsViewProps,
+} from "./CopilotChatToolCallsView";
+
+export {
+  default as CopilotChatView,
+  type CopilotChatViewProps,
+} from "./CopilotChatView";
+
+export { CopilotChat, type CopilotChatProps } from "./CopilotChat";
+
+export {
+  CopilotChatToggleButton,
+  type CopilotChatToggleButtonProps,
+  CopilotChatToggleButtonOpenIcon,
+  CopilotChatToggleButtonCloseIcon,
+} from "./CopilotChatToggleButton";
+
+export {
+  CopilotSidebarView,
+  type CopilotSidebarViewProps,
+} from "./CopilotSidebarView";
+
+export {
+  CopilotPopupView,
+  type CopilotPopupViewProps,
+} from "./CopilotPopupView";
+
+export {
+  CopilotModalHeader,
+  type CopilotModalHeaderProps,
+} from "./CopilotModalHeader";
+
+export { CopilotSidebar, type CopilotSidebarProps } from "./CopilotSidebar";
+
+export { CopilotPopup, type CopilotPopupProps } from "./CopilotPopup";

package/src/v2/components/index.ts

@@ -0,0 +1,7 @@
+// React components for CopilotKit2
+// Components will be added here
+
+export * from "./chat";
+export * from "./WildcardToolCallRender";
+export * from "./CopilotKitInspector";
+export * from "./MCPAppsActivityRenderer";

package/src/v2/components/license-warning-banner.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+
+interface LicenseWarningBannerProps {
+  type:
+    | "no_license"
+    | "expired"
+    | "expiring"
+    | "invalid"
+    | "feature_unlicensed";
+  featureName?: string;
+  expiryDate?: string;
+  graceRemaining?: number;
+  onDismiss?: () => void;
+}
+
+const BANNER_STYLES: Record<string, React.CSSProperties> = {
+  base: {
+    position: "fixed",
+    bottom: "8px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 99999,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "12px",
+    whiteSpace: "nowrap",
+    padding: "8px 16px",
+    fontSize: "13px",
+    fontFamily:
+      "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    borderRadius: "6px",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+  },
+  info: {
+    backgroundColor: "#eff6ff",
+    border: "1px solid #93c5fd",
+    color: "#1e40af",
+  },
+  warning: {
+    backgroundColor: "#fffbeb",
+    border: "1px solid #fbbf24",
+    color: "#92400e",
+  },
+  critical: {
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fca5a5",
+    color: "#991b1b",
+  },
+};
+
+function getSeverityStyle(severity: string): React.CSSProperties {
+  switch (severity) {
+    case "warning":
+      return BANNER_STYLES.warning;
+    case "critical":
+      return BANNER_STYLES.critical;
+    default:
+      return BANNER_STYLES.info;
+  }
+}
+
+function BannerShell({
+  severity,
+  message,
+  actionLabel,
+  actionUrl,
+  onDismiss,
+}: {
+  severity: string;
+  message: string;
+  actionLabel: string;
+  actionUrl: string;
+  onDismiss?: () => void;
+}) {
+  return (
+    <div style={{ ...BANNER_STYLES.base, ...getSeverityStyle(severity) }}>
+      <span>{message}</span>
+      <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+        <a
+          href={actionUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            fontWeight: 600,
+            textDecoration: "underline",
+            color: "inherit",
+          }}
+        >
+          {actionLabel}
+        </a>
+        {onDismiss && (
+          <button
+            onClick={onDismiss}
+            style={{
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "inherit",
+              fontSize: "16px",
+            }}
+          >
+            ×
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function LicenseWarningBanner({
+  type,
+  featureName,
+  expiryDate,
+  graceRemaining,
+  onDismiss,
+}: LicenseWarningBannerProps) {
+  switch (type) {
+    case "no_license":
+      return (
+        <BannerShell
+          severity="info"
+          message="Powered by CopilotKit"
+          actionLabel="Get a license"
+          actionUrl="https://copilotkit.ai/pricing"
+          onDismiss={onDismiss}
+        />
+      );
+    case "feature_unlicensed":
+      return (
+        <BannerShell
+          severity="warning"
+          message={`⚠ The "${featureName}" feature requires a CopilotKit license.`}
+          actionLabel="Get a license"
+          actionUrl="https://copilotkit.ai/pricing"
+          onDismiss={onDismiss}
+        />
+      );
+    case "expiring":
+      return (
+        <BannerShell
+          severity="warning"
+          message={`Your CopilotKit license expires in ${graceRemaining} day${graceRemaining !== 1 ? "s" : ""}. Please renew.`}
+          actionLabel="Renew"
+          actionUrl="https://cloud.copilotkit.ai"
+          onDismiss={onDismiss}
+        />
+      );
+    case "expired":
+      return (
+        <BannerShell
+          severity="critical"
+          message={`Your CopilotKit license expired${expiryDate ? ` on ${expiryDate}` : ""}. Please renew at copilotkit.ai/pricing`}
+          actionLabel="Renew now"
+          actionUrl="https://copilotkit.ai/pricing"
+          onDismiss={onDismiss}
+        />
+      );
+    case "invalid":
+      return (
+        <BannerShell
+          severity="critical"
+          message="Invalid CopilotKit license token. Please check your configuration."
+          actionLabel="Get a license"
+          actionUrl="https://copilotkit.ai/pricing"
+          onDismiss={onDismiss}
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+export function InlineFeatureWarning({ featureName }: { featureName: string }) {
+  return (
+    <div
+      style={{
+        padding: "8px 12px",
+        backgroundColor: "#fffbeb",
+        border: "1px solid #fbbf24",
+        borderRadius: "6px",
+        fontSize: "13px",
+        color: "#92400e",
+        fontFamily:
+          "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      }}
+    >
+      ⚠ The &quot;{featureName}&quot; feature requires a CopilotKit license.{" "}
+      <a
+        href="https://copilotkit.ai/pricing"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ color: "#b45309", textDecoration: "underline" }}
+      >
+        Get one at copilotkit.ai/pricing
+      </a>
+    </div>
+  );
+}

package/src/v2/components/ui/button.tsx

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "cpk:inline-flex cpk:items-center cpk:justify-center cpk:gap-2 cpk:whitespace-nowrap cpk:rounded-md cpk:text-sm cpk:font-medium cpk:transition-all cpk:disabled:pointer-events-none cpk:disabled:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg:not([class*='size-'])]:size-4 cpk:shrink-0 cpk:[&_svg]:shrink-0 cpk:outline-none cpk:focus-visible:border-ring cpk:focus-visible:ring-ring/50 cpk:focus-visible:ring-[3px] cpk:aria-invalid:ring-destructive/20 cpk:dark:aria-invalid:ring-destructive/40 cpk:aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "cpk:bg-primary cpk:text-primary-foreground cpk:shadow-xs cpk:hover:bg-primary/90",
+        destructive:
+          "cpk:bg-destructive cpk:text-white cpk:shadow-xs cpk:hover:bg-destructive/90 cpk:focus-visible:ring-destructive/20 cpk:dark:focus-visible:ring-destructive/40 cpk:dark:bg-destructive/60",
+        outline:
+          "cpk:border cpk:bg-background cpk:shadow-xs cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:bg-input/30 cpk:dark:border-input cpk:dark:hover:bg-input/50",
+        secondary:
+          "cpk:bg-secondary cpk:text-secondary-foreground cpk:shadow-xs cpk:hover:bg-secondary/80",
+        ghost:
+          "cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:hover:bg-accent/50 cpk:cursor-pointer",
+        link: "cpk:text-primary cpk:underline-offset-4 cpk:hover:underline",
+        assistantMessageToolbarButton: [
+          "cpk:cursor-pointer",
+          // Background and text
+          "cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8]",
+          // Dark mode - lighter gray for better contrast
+          "cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]",
+          // Shape and sizing
+          "cpk:h-8 cpk:w-8",
+          // Interactions
+          "cpk:transition-colors",
+          // Hover states
+          "cpk:hover:text-[rgb(93,93,93)]",
+          "cpk:dark:hover:text-[rgb(243,243,243)]",
+        ],
+        chatInputToolbarPrimary: [
+          "cpk:cursor-pointer",
+          // Background and text
+          "cpk:bg-black cpk:text-white",
+          // Dark mode
+          "cpk:dark:bg-white cpk:dark:text-black cpk:dark:focus-visible:outline-white",
+          // Shape and sizing
+          "cpk:rounded-full",
+          // Interactions
+          "cpk:transition-colors",
+          // Focus states
+          "cpk:focus:outline-none",
+          // Hover states
+          "cpk:hover:opacity-70 cpk:disabled:hover:opacity-100",
+          // Disabled states
+          "cpk:disabled:cursor-not-allowed cpk:disabled:bg-[#00000014] cpk:disabled:text-[rgb(13,13,13)]",
+          "cpk:dark:disabled:bg-[#454545] cpk:dark:disabled:text-white ",
+        ],
+        chatInputToolbarSecondary: [
+          "cpk:cursor-pointer",
+          // Background and text
+          "cpk:bg-transparent cpk:text-[#444444]",
+          // Dark mode
+          "cpk:dark:text-white cpk:dark:border-[#404040]",
+          // Shape and sizing
+          "cpk:rounded-full",
+          // Interactions
+          "cpk:transition-colors",
+          // Focus states
+          "cpk:focus:outline-none",
+          // Hover states
+          "cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333]",
+          "cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF]",
+          // Disabled states
+          "cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50",
+          "cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444]",
+          "cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC]",
+        ],
+      },
+      size: {
+        default: "cpk:h-9 cpk:px-4 cpk:py-2 cpk:has-[>svg]:px-3",
+        sm: "cpk:h-8 cpk:rounded-md cpk:gap-1.5 cpk:px-3 cpk:has-[>svg]:px-2.5",
+        lg: "cpk:h-10 cpk:rounded-md cpk:px-6 cpk:has-[>svg]:px-4",
+        icon: "cpk:size-9",
+        chatInputToolbarIcon: [
+          // Shape and sizing
+          "cpk:h-9 cpk:w-9 cpk:rounded-full",
+        ],
+        chatInputToolbarIconLabel: [
+          // Shape and sizing
+          "cpk:h-9 cpk:px-3 cpk:rounded-full",
+          // Layout
+          "cpk:gap-2",
+          // Typography
+          "cpk:font-normal",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/v2/components/ui/dropdown-menu.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-copilotkit
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:max-h-(--radix-dropdown-menu-content-available-height) cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-x-hidden cpk:overflow-y-auto cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[variant=destructive]:text-destructive cpk:data-[variant=destructive]:focus:bg-destructive/10 cpk:dark:data-[variant=destructive]:focus:bg-destructive/20 cpk:data-[variant=destructive]:focus:text-destructive cpk:data-[variant=destructive]:*:[svg]:!text-destructive cpk:[&_svg:not([class*='text-'])]:text-muted-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:data-[inset]:pl-8 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:py-1.5 cpk:pr-2 cpk:pl-8 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="cpk:pointer-events-none cpk:absolute cpk:left-2 cpk:flex cpk:size-3.5 cpk:items-center cpk:justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="cpk:size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:py-1.5 cpk:pr-2 cpk:pl-8 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="cpk:pointer-events-none cpk:absolute cpk:left-2 cpk:flex cpk:size-3.5 cpk:items-center cpk:justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="cpk:size-2 cpk:fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:font-medium cpk:data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("cpk:bg-border cpk:-mx-1 cpk:my-1 cpk:h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "cpk:text-muted-foreground cpk:ml-auto cpk:text-xs cpk:tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[state=open]:bg-accent cpk:data-[state=open]:text-accent-foreground cpk:flex cpk:cursor-default cpk:items-center cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cpk:ml-auto cpk:size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-hidden cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};