zudoku 0.33.2-local.4 → 0.34.0

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -1,5 +1,6 @@
-import { UseMutationResult } from "@tanstack/react-query";
+import { type UseMutationResult } from "@tanstack/react-query";
 import { Spinner } from "../../../../components/Spinner.js";
+import { Button } from "../../../../ui/Button.js";
 import { Callout } from "../../../../ui/Callout.js";
 import {
   Card,
@@ -14,20 +15,24 @@ import {
   TabsTrigger,
 } from "../../../../ui/Tabs.js";
 import { cn } from "../../../../util/cn.js";
-import { PlaygroundResult } from "../Playground.js";
+import { type PlaygroundResult } from "../Playground.js";
 import { RequestTab } from "./RequestTab.js";
 import { ResponseTab } from "./ResponseTab.js";
 
 export const ResultPanel = ({
   queryMutation,
   showPathParamsWarning,
+  showLongRunningWarning,
+  onCancel,
 }: {
-  queryMutation: UseMutationResult<PlaygroundResult, Error, any, unknown>;
+  queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showPathParamsWarning: boolean;
+  showLongRunningWarning?: boolean;
+  onCancel?: () => void;
 }) => {
   const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-8 bg-muted/70 overflow-y-auto">
+    <div className="min-w-0 p-4 bg-muted/50">
       {queryMutation.error ? (
         <div className="flex flex-col gap-2">
           {showPathParamsWarning && (
@@ -49,49 +54,65 @@ export const ResultPanel = ({
           </Card>
         </div>
       ) : queryMutation.data ? (
-        <div className="flex flex-col gap-2">
-          <Tabs defaultValue="response">
-            <TabsList>
-              <TabsTrigger value="request">Request</TabsTrigger>
-              <TabsTrigger value="response">
-                Response
-                <span
-                  className={cn(
-                    "text-xs font-mono ml-1",
-                    status === "2" && "text-green-500",
-                    status === "3" && "text-blue-500",
-                    status === "4" && "text-yellow-500",
-                    status === "5" && "text-red-500",
-                  )}
-                >
-                  ({queryMutation.data.status})
-                </span>
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="request">
-              <RequestTab {...queryMutation.data.request} />
-            </TabsContent>
-            <TabsContent value="response">
-              <ResponseTab
-                status={queryMutation.data.status}
-                time={queryMutation.data.time}
-                size={queryMutation.data.size}
-                headers={queryMutation.data.headers}
-                body={queryMutation.data.body}
-                url={queryMutation.data.request.url}
-              />
-            </TabsContent>
-          </Tabs>
-        </div>
+        <Tabs defaultValue="response">
+          <TabsList>
+            <TabsTrigger value="request">Request</TabsTrigger>
+            <TabsTrigger value="response">
+              Response
+              <span
+                className={cn(
+                  "text-xs font-mono ml-1",
+                  status === "2" && "text-green-500",
+                  status === "3" && "text-blue-500",
+                  status === "4" && "text-yellow-500",
+                  status === "5" && "text-red-500",
+                )}
+              >
+                ({queryMutation.data.status})
+              </span>
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="request">
+            <RequestTab {...queryMutation.data.request} />
+          </TabsContent>
+          <TabsContent value="response">
+            <ResponseTab
+              status={queryMutation.data.status}
+              time={queryMutation.data.time}
+              size={queryMutation.data.size}
+              headers={queryMutation.data.headers}
+              body={queryMutation.data.body}
+              url={queryMutation.data.request.url}
+            />
+          </TabsContent>
+        </Tabs>
       ) : (
         <div className="grid place-items-center h-full">
-          <span className="text-[16px] font-semibold text-muted-foreground">
-            {queryMutation.isPending ? (
-              <Spinner />
-            ) : (
-              "Send a request first to see the response here"
-            )}
-          </span>
+          {queryMutation.isPending ? (
+            <div className="flex flex-col gap-2 items-center mt-20">
+              <Spinner size={20} />
+              <div
+                className={cn(
+                  "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
+                  showLongRunningWarning && "opacity-100 pointer-events-auto",
+                )}
+              >
+                Looks like the request is taking longer than expected.
+                <Button
+                  onClick={onCancel}
+                  size="sm"
+                  className="w-fit"
+                  variant="outline"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <span className="text-[16px] font-semibold text-muted-foreground">
+              Send a request first to see the response here
+            </span>
+          )}
         </div>
       )}
     </div>

package/src/lib/ui/Checkbox.tsx

@@ -1,36 +1,20 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { cva, type VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";
 
-const checkboxVariants = cva(
-  "peer h-4 w-4 shrink-0 rounded-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary",
-  {
-    variants: {
-      variant: {
-        default: "border border-primary data-[state=checked]:bg-primary",
-        outline: "border border-input data-[state=checked]:bg-accent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof checkboxVariants> {}
-
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({ className, variant, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cn(checkboxVariants({ variant, className }))}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-[min(6px,var(--radius)-4px)] ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary",
+      "border border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      className,
+    )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
@@ -42,4 +26,4 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox };

package/src/lib/ui/Select.tsx

@@ -115,7 +115,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

package/src/lib/ui/SyntaxHighlight.tsx

@@ -30,7 +30,7 @@ void import("prismjs/components/prism-javascript.min.js");
 void import("prismjs/components/prism-typescript.min.js");
 
 import { useTheme } from "next-themes";
-import { useState } from "react";
+import { memo, useState } from "react";
 import { ClientOnly } from "../components/ClientOnly.js";
 import { cn } from "../util/cn.js";
 
@@ -45,18 +45,20 @@ export type SyntaxHighlightProps = {
   code?: string;
   showCopy?: "hover" | "always" | "never";
   showCopyText?: boolean;
+  disabled?: boolean;
 } & Omit<HighlightProps, "children" | "language">;
 
 const remapLang = {
   mdx: "md",
 } as Record<string, string>;
 
-export const SyntaxHighlight = ({
+const SyntaxHighlightInner = ({
   language = "plain",
   showCopy = "hover",
   showCopyText,
   title,
   children,
+  disabled,
   ...props
 }: SyntaxHighlightProps) => {
   const { resolvedTheme } = useTheme();
@@ -75,34 +77,84 @@ export const SyntaxHighlight = ({
   const themeColorClasses =
     "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
 
-  return (
-    <ClientOnly
-      fallback={
-        <div className="relative group">
-          {title && (
-            <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
-              {title}
-            </div>
+  const Wrapper = ({
+    children,
+    className,
+    style,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+  }) => (
+    <div className="relative group">
+      {title && (
+        <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+          {title}
+        </div>
+      )}
+      <pre
+        className={cn(
+          "relative scrollbar overflow-x-auto",
+          props.className,
+          props.noBackground ? "!bg-transparent" : themeColorClasses,
+          props.wrapLines && "whitespace-pre-wrap break-words",
+          title && "pt-10",
+          className,
+        )}
+        style={style}
+      >
+        {children}
+      </pre>
+      {props.showLanguageIndicator && (
+        <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 right-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+            showCopy === "hover"
+              ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
+              : "bg-zinc-100 dark:bg-zinc-700",
+            showCopyText && "flex gap-2 items-center font-medium",
           )}
-          <pre
-            className={cn(
-              "relative scrollbar overflow-x-auto",
-              props.className,
-              props.noBackground ? "!bg-transparent" : themeColorClasses,
-              props.wrapLines && "whitespace-pre-wrap break-words",
-              title && "pt-10",
-            )}
-          >
-            {code}
-          </pre>
-          {props.showLanguageIndicator && (
-            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-              {language}
-            </span>
+          disabled={isCopied}
+          onClick={() => {
+            setIsCopied(true);
+            void navigator.clipboard.writeText(code);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
           )}
-        </div>
-      }
-    >
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+
+  if (disabled) {
+    return (
+      <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
+        <Wrapper>{code}</Wrapper>
+      </ClientOnly>
+    );
+  }
+
+  return (
+    <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
       <Highlight
         theme={highlightTheme}
         language={remapLang[language] ?? language}
@@ -110,77 +162,23 @@ export const SyntaxHighlight = ({
         code={code}
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <div className="relative group">
-            {title && (
-              <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
-                {title}
+          <Wrapper className={className} style={style}>
+            {tokens.map((line, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
               </div>
-            )}
-            <pre
-              className={cn(
-                "relative scrollbar overflow-x-auto",
-                className,
-                props.className,
-                props.noBackground && "!bg-transparent",
-                props.wrapLines && "whitespace-pre-wrap break-words",
-                title && "pt-10",
-              )}
-              style={style}
-            >
-              {tokens.map((line, i) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <div key={i} {...getLineProps({ line })}>
-                  {line.map((token, key) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-            {props.showLanguageIndicator && (
-              <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-                {language}
-              </span>
-            )}
-            {showCopy !== "never" && (
-              <button
-                type="button"
-                aria-label="Copy code"
-                title="Copy code"
-                className={cn(
-                  "absolute top-2 right-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
-                  showCopy === "hover"
-                    ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
-                    : "bg-zinc-100 dark:bg-zinc-700",
-                  showCopyText && "flex gap-2 items-center font-medium",
-                )}
-                disabled={isCopied}
-                onClick={() => {
-                  setIsCopied(true);
-                  void navigator.clipboard.writeText(
-                    tokens
-                      .map((l) => l.map(({ content }) => content).join(""))
-                      .join("\n"),
-                  );
-                  setTimeout(() => setIsCopied(false), 2000);
-                }}
-              >
-                {isCopied ? (
-                  <CheckIcon
-                    className="text-emerald-600"
-                    size={16}
-                    strokeWidth={2.5}
-                    absoluteStrokeWidth
-                  />
-                ) : (
-                  <CopyIcon size={16} />
-                )}
-                {showCopyText && "Copy"}
-              </button>
-            )}
-          </div>
+            ))}
+          </Wrapper>
         )}
       </Highlight>
     </ClientOnly>
   );
 };
+
+export const SyntaxHighlight = memo(SyntaxHighlightInner);
+
+SyntaxHighlight.displayName = "SyntaxHighlight";

package/src/lib/util/MdxComponents.tsx

@@ -1,5 +1,5 @@
 import { type MDXComponents } from "mdx/types.js";
-import { Link } from "react-router";
+import { AnchorLink } from "../components/AnchorLink.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
 import { Callout } from "../ui/Callout.js";
@@ -47,7 +47,7 @@ export const MdxComponents = {
   ),
   a: ({ href, node, ...props }) =>
     href && !href.startsWith("http") ? (
-      <Link to={href} relative="path" {...props} />
+      <AnchorLink to={href} relative="path" {...props} />
     ) : (
       <a href={href} target="_blank" {...props} rel="noreferrer" />
     ),

package/lib/Command-CrTA1FX0.js

@@ -1,140 +0,0 @@
-import { j as d } from "./jsx-runtime-CYK1ROHF.js";
-import { V as r } from "./index-gQD2h1wX.js";
-import { Search as p } from "lucide-react";
-import * as t from "react";
-import { D as n, a as l } from "./Dialog-mi6BrnrM.js";
-import { c as o } from "./cn-qaFjX9_3.js";
-const m = t.forwardRef(({ className: s, ...e }, a) => /* @__PURE__ */ d.jsx(
-  r,
-  {
-    ref: a,
-    className: o(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      s
-    ),
-    ...e
-  }
-));
-m.displayName = r.displayName;
-const k = ({
-  children: s,
-  command: e,
-  content: a,
-  ...i
-}) => /* @__PURE__ */ d.jsx(n, { ...i, children: /* @__PURE__ */ d.jsx(
-  l,
-  {
-    ...a,
-    className: o(
-      "overflow-hidden p-0 shadow-lg top-[15vh] translate-y-[0%]",
-      a == null ? void 0 : a.className
-    ),
-    "aria-describedby": void 0,
-    children: /* @__PURE__ */ d.jsx(
-      m,
-      {
-        ...e,
-        className: o(
-          "[&_[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",
-          e == null ? void 0 : e.className
-        ),
-        children: s
-      }
-    )
-  }
-) }), c = t.forwardRef(({ className: s, ...e }, a) => (
-  // eslint-disable-next-line react/no-unknown-property
-  /* @__PURE__ */ d.jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ d.jsx(p, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-    /* @__PURE__ */ d.jsx(
-      r.Input,
-      {
-        ref: a,
-        className: o(
-          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          s
-        ),
-        ...e
-      }
-    )
-  ] })
-));
-c.displayName = r.Input.displayName;
-const u = t.forwardRef(({ className: s, ...e }, a) => (
-  // eslint-disable-next-line react/no-unknown-property
-  /* @__PURE__ */ d.jsx("div", { className: "flex items-center", "cmdk-input-wrapper": "", children: /* @__PURE__ */ d.jsx(
-    r.Input,
-    {
-      ref: a,
-      className: o(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        s
-      ),
-      ...e
-    }
-  ) })
-));
-u.displayName = r.Input.displayName;
-const f = t.forwardRef(({ className: s, ...e }, a) => /* @__PURE__ */ d.jsx(
-  r.List,
-  {
-    ref: a,
-    className: o("max-h-[300px] overflow-y-auto overflow-x-hidden", s),
-    ...e
-  }
-));
-f.displayName = r.List.displayName;
-const x = t.forwardRef((s, e) => /* @__PURE__ */ d.jsx(
-  r.Empty,
-  {
-    ref: e,
-    className: "py-6 text-center text-sm",
-    ...s
-  }
-));
-x.displayName = r.Empty.displayName;
-const g = t.forwardRef(({ className: s, ...e }, a) => /* @__PURE__ */ d.jsx(
-  r.Group,
-  {
-    ref: a,
-    className: o(
-      "overflow-hidden p-1 text-foreground [&_[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",
-      s
-    ),
-    ...e
-  }
-));
-g.displayName = r.Group.displayName;
-const h = t.forwardRef(({ className: s, ...e }, a) => /* @__PURE__ */ d.jsx(
-  r.Separator,
-  {
-    ref: a,
-    className: o("-mx-1 h-px bg-border", s),
-    ...e
-  }
-));
-h.displayName = r.Separator.displayName;
-const y = t.forwardRef(({ className: s, ...e }, a) => /* @__PURE__ */ d.jsx(
-  r.Item,
-  {
-    ref: a,
-    className: o(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      s
-    ),
-    ...e
-  }
-));
-y.displayName = r.Item.displayName;
-export {
-  f as C,
-  g as a,
-  y as b,
-  k as c,
-  c as d,
-  x as e,
-  m as f,
-  u as g
-};
-//# sourceMappingURL=Command-CrTA1FX0.js.map

package/lib/Command-CrTA1FX0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Command-CrTA1FX0.js","sources":["../src/lib/ui/Command.tsx"],"sourcesContent":["import { type DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport * as React from \"react\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { Dialog, DialogContent } from \"zudoku/ui/Dialog.js\";\nimport { cn } from \"../util/cn.js\";\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nconst CommandDialog = ({\n  children,\n  command,\n  content,\n  ...props\n}: DialogProps & {\n  command?: ComponentPropsWithoutRef<typeof CommandPrimitive>;\n  content?: ComponentPropsWithoutRef<typeof DialogContent>;\n}) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        {...content}\n        className={cn(\n          \"overflow-hidden p-0 shadow-lg top-[15vh] translate-y-[0%]\",\n          content?.className,\n        )}\n        aria-describedby={undefined}\n      >\n        <Command\n          {...command}\n          className={cn(\n            \"[&_[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\",\n            command?.className,\n          )}\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  // eslint-disable-next-line react/no-unknown-property\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  </div>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandInlineInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  // eslint-disable-next-line react/no-unknown-property\n  <div className=\"flex items-center\" cmdk-input-wrapper=\"\">\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n        className,\n      )}\n      {...props}\n    />\n  </div>\n));\n\nCommandInlineInput.displayName = CommandPrimitive.Input.displayName;\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[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\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = \"CommandShortcut\";\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInlineInput,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"names":["Command","React","className","props","ref","jsx","CommandPrimitive","cn","CommandDialog","children","command","content","Dialog","DialogContent","CommandInput","jsxs","Search","CommandInlineInput","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem"],"mappings":"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"}