@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/sandbox.cjs

@@ -0,0 +1,114 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+var _collapsible = require('../ui/collapsible');
+
+
+
+
+
+var _tabs = require('../ui/tabs');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+var _tool = require('./tool');
+const Sandbox = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _collapsible.Collapsible,
+  {
+    className: _utils.cn.call(void 0, 
+      "not-prose group mb-4 w-full overflow-hidden rounded-md border",
+      className
+    ),
+    defaultOpen: true,
+    ...props
+  }
+);
+const SandboxHeader = ({
+  className,
+  title,
+  state,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _collapsible.CollapsibleTrigger,
+  {
+    className: _utils.cn.call(void 0, 
+      "flex w-full items-center justify-between gap-4 p-3",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Code, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-sm", children: title }),
+        _tool.getStatusBadge.call(void 0, state)
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+    ]
+  }
+);
+const SandboxContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _collapsible.CollapsibleContent,
+  {
+    className: _utils.cn.call(void 0, 
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+const SandboxTabs = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tabs.Tabs, { className: _utils.cn.call(void 0, "w-full gap-0", className), ...props });
+const SandboxTabsBar = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex w-full items-center border-border border-t border-b",
+      className
+    ),
+    ...props
+  }
+);
+const SandboxTabsList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _tabs.TabsList,
+  {
+    className: _utils.cn.call(void 0, "h-auto rounded-none border-0 bg-transparent p-0", className),
+    ...props
+  }
+);
+const SandboxTabsTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _tabs.TabsTrigger,
+  {
+    className: _utils.cn.call(void 0, 
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      className
+    ),
+    ...props
+  }
+);
+const SandboxTabContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tabs.TabsContent, { className: _utils.cn.call(void 0, "mt-0 text-sm", className), ...props });
+
+
+
+
+
+
+
+
+
+exports.Sandbox = Sandbox; exports.SandboxContent = SandboxContent; exports.SandboxHeader = SandboxHeader; exports.SandboxTabContent = SandboxTabContent; exports.SandboxTabs = SandboxTabs; exports.SandboxTabsBar = SandboxTabsBar; exports.SandboxTabsList = SandboxTabsList; exports.SandboxTabsTrigger = SandboxTabsTrigger;

package/dist/components/ai-elements/sandbox.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent } from '../ui/collapsible.cjs';
+import { TabsContent, Tabs, TabsList, TabsTrigger } from '../ui/tabs.cjs';
+import 'radix-ui';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type SandboxRootProps = ComponentProps<typeof Collapsible>;
+declare const Sandbox: ({ className, ...props }: SandboxRootProps) => react_jsx_runtime.JSX.Element;
+interface SandboxHeaderProps {
+    title?: string;
+    state: ToolUIPart["state"];
+    className?: string;
+}
+declare const SandboxHeader: ({ className, title, state, ...props }: SandboxHeaderProps) => react_jsx_runtime.JSX.Element;
+type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const SandboxContent: ({ className, ...props }: SandboxContentProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsProps = ComponentProps<typeof Tabs>;
+declare const SandboxTabs: ({ className, ...props }: SandboxTabsProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsBarProps = ComponentProps<"div">;
+declare const SandboxTabsBar: ({ className, ...props }: SandboxTabsBarProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsListProps = ComponentProps<typeof TabsList>;
+declare const SandboxTabsList: ({ className, ...props }: SandboxTabsListProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
+declare const SandboxTabsTrigger: ({ className, ...props }: SandboxTabsTriggerProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabContentProps = ComponentProps<typeof TabsContent>;
+declare const SandboxTabContent: ({ className, ...props }: SandboxTabContentProps) => react_jsx_runtime.JSX.Element;
+
+export { Sandbox, SandboxContent, type SandboxContentProps, SandboxHeader, type SandboxHeaderProps, type SandboxRootProps, SandboxTabContent, type SandboxTabContentProps, SandboxTabs, SandboxTabsBar, type SandboxTabsBarProps, SandboxTabsList, type SandboxTabsListProps, type SandboxTabsProps, SandboxTabsTrigger, type SandboxTabsTriggerProps };

package/dist/components/ai-elements/sandbox.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent } from '../ui/collapsible.js';
+import { TabsContent, Tabs, TabsList, TabsTrigger } from '../ui/tabs.js';
+import 'radix-ui';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type SandboxRootProps = ComponentProps<typeof Collapsible>;
+declare const Sandbox: ({ className, ...props }: SandboxRootProps) => react_jsx_runtime.JSX.Element;
+interface SandboxHeaderProps {
+    title?: string;
+    state: ToolUIPart["state"];
+    className?: string;
+}
+declare const SandboxHeader: ({ className, title, state, ...props }: SandboxHeaderProps) => react_jsx_runtime.JSX.Element;
+type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const SandboxContent: ({ className, ...props }: SandboxContentProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsProps = ComponentProps<typeof Tabs>;
+declare const SandboxTabs: ({ className, ...props }: SandboxTabsProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsBarProps = ComponentProps<"div">;
+declare const SandboxTabsBar: ({ className, ...props }: SandboxTabsBarProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsListProps = ComponentProps<typeof TabsList>;
+declare const SandboxTabsList: ({ className, ...props }: SandboxTabsListProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
+declare const SandboxTabsTrigger: ({ className, ...props }: SandboxTabsTriggerProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabContentProps = ComponentProps<typeof TabsContent>;
+declare const SandboxTabContent: ({ className, ...props }: SandboxTabContentProps) => react_jsx_runtime.JSX.Element;
+
+export { Sandbox, SandboxContent, type SandboxContentProps, SandboxHeader, type SandboxHeaderProps, type SandboxRootProps, SandboxTabContent, type SandboxTabContentProps, SandboxTabs, SandboxTabsBar, type SandboxTabsBarProps, SandboxTabsList, type SandboxTabsListProps, type SandboxTabsProps, SandboxTabsTrigger, type SandboxTabsTriggerProps };

package/dist/components/ai-elements/sandbox.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "../ui/tabs";
+import { cn } from "../../lib/utils";
+import { ChevronDownIcon, Code } from "lucide-react";
+import { getStatusBadge } from "./tool";
+const Sandbox = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn(
+      "not-prose group mb-4 w-full overflow-hidden rounded-md border",
+      className
+    ),
+    defaultOpen: true,
+    ...props
+  }
+);
+const SandboxHeader = ({
+  className,
+  title,
+  state,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  CollapsibleTrigger,
+  {
+    className: cn(
+      "flex w-full items-center justify-between gap-4 p-3",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Code, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title }),
+        getStatusBadge(state)
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+    ]
+  }
+);
+const SandboxContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleContent,
+  {
+    className: cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+const SandboxTabs = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs, { className: cn("w-full gap-0", className), ...props });
+const SandboxTabsBar = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex w-full items-center border-border border-t border-b",
+      className
+    ),
+    ...props
+  }
+);
+const SandboxTabsList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  TabsList,
+  {
+    className: cn("h-auto rounded-none border-0 bg-transparent p-0", className),
+    ...props
+  }
+);
+const SandboxTabsTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  TabsTrigger,
+  {
+    className: cn(
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      className
+    ),
+    ...props
+  }
+);
+const SandboxTabContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(TabsContent, { className: cn("mt-0 text-sm", className), ...props });
+export {
+  Sandbox,
+  SandboxContent,
+  SandboxHeader,
+  SandboxTabContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger
+};

package/dist/components/ai-elements/schema-display.cjs

@@ -0,0 +1,330 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _badge = require('../ui/badge');
+
+
+
+
+var _collapsible = require('../ui/collapsible');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+const SchemaDisplayContext = _react.createContext.call(void 0, {
+  method: "GET",
+  path: ""
+});
+const SchemaDisplay = ({
+  method,
+  path,
+  description,
+  parameters,
+  requestBody,
+  responseBody,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      description,
+      method,
+      parameters,
+      path,
+      requestBody,
+      responseBody
+    }),
+    [description, method, parameters, path, requestBody, responseBody]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "overflow-hidden rounded-lg border bg-background",
+        className
+      ),
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayMethod, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayPath, {})
+        ] }) }),
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayDescription, {}),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SchemaDisplayContent, { children: [
+          parameters && parameters.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayParameters, {}),
+          requestBody && requestBody.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayRequest, {}),
+          responseBody && responseBody.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayResponse, {})
+        ] })
+      ] })))
+    }
+  ) });
+};
+const SchemaDisplayHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, "flex items-center gap-3 border-b px-4 py-3", className),
+    ...props,
+    children
+  }
+);
+const methodStyles = {
+  DELETE: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  GET: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  PATCH: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  POST: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  PUT: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
+};
+const SchemaDisplayMethod = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { method } = _react.use.call(void 0, SchemaDisplayContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _badge.Badge,
+    {
+      className: _utils.cn.call(void 0, "font-mono text-xs", methodStyles[method], className),
+      variant: "secondary",
+      ...props,
+      children: _nullishCoalesce(children, () => ( method))
+    }
+  );
+};
+const SchemaDisplayPath = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { path } = _react.use.call(void 0, SchemaDisplayContext);
+  const highlightedPath = path.replaceAll(
+    /\{([^}]+)\}/g,
+    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>'
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      className: _utils.cn.call(void 0, "font-mono text-sm", className),
+      dangerouslySetInnerHTML: { __html: _nullishCoalesce(children, () => ( highlightedPath)) },
+      ...props
+    }
+  );
+};
+const SchemaDisplayDescription = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { description } = _react.use.call(void 0, SchemaDisplayContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    {
+      className: _utils.cn.call(void 0, 
+        "border-b px-4 py-3 text-muted-foreground text-sm",
+        className
+      ),
+      ...props,
+      children: _nullishCoalesce(children, () => ( description))
+    }
+  );
+};
+const SchemaDisplayContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "divide-y", className), ...props, children });
+const SchemaDisplayParameters = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { parameters } = _react.use.call(void 0, SchemaDisplayContext);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _collapsible.Collapsible, { className: _utils.cn.call(void 0, className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _collapsible.CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-sm", children: "Parameters" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { className: "ml-auto text-xs", variant: "secondary", children: _optionalChain([parameters, 'optionalAccess', _ => _.length]) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "divide-y border-t", children: _nullishCoalesce(children, () => ( _optionalChain([parameters, 'optionalAccess', _2 => _2.map, 'call', _3 => _3((param) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayParameter, { ...param }, param.name))]))) }) })
+  ] });
+};
+const SchemaDisplayParameter = ({
+  name,
+  type,
+  required,
+  description,
+  location,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "px-4 py-3 pl-10", className), ...props, children: [
+  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono text-sm", children: name }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { className: "text-xs", variant: "outline", children: type }),
+    location && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { className: "text-xs", variant: "secondary", children: location }),
+    required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _badge.Badge,
+      {
+        className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+        variant: "secondary",
+        children: "required"
+      }
+    )
+  ] }),
+  description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-1 text-muted-foreground text-sm", children: description })
+] });
+const SchemaDisplayRequest = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { requestBody } = _react.use.call(void 0, SchemaDisplayContext);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _collapsible.Collapsible, { className: _utils.cn.call(void 0, className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _collapsible.CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-sm", children: "Request Body" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-t", children: _nullishCoalesce(children, () => ( _optionalChain([requestBody, 'optionalAccess', _4 => _4.map, 'call', _5 => _5((prop) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayProperty, { ...prop, depth: 0 }, prop.name))]))) }) })
+  ] });
+};
+const SchemaDisplayResponse = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { responseBody } = _react.use.call(void 0, SchemaDisplayContext);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _collapsible.Collapsible, { className: _utils.cn.call(void 0, className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _collapsible.CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-sm", children: "Response" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-t", children: _nullishCoalesce(children, () => ( _optionalChain([responseBody, 'optionalAccess', _6 => _6.map, 'call', _7 => _7((prop) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SchemaDisplayProperty, { ...prop, depth: 0 }, prop.name))]))) }) })
+  ] });
+};
+const SchemaDisplayBody = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "divide-y", className), ...props, children });
+const SchemaDisplayProperty = ({
+  name,
+  type,
+  required,
+  description,
+  properties,
+  items,
+  depth = 0,
+  className,
+  ...props
+}) => {
+  const hasChildren = properties || items;
+  const paddingLeft = 40 + depth * 16;
+  if (hasChildren) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _collapsible.Collapsible, { defaultOpen: depth < 2, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _collapsible.CollapsibleTrigger,
+        {
+          className: _utils.cn.call(void 0, 
+            "group flex w-full items-center gap-2 py-3 text-left transition-colors hover:bg-muted/50",
+            className
+          ),
+          style: { paddingLeft },
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono text-sm", children: name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { className: "text-xs", variant: "outline", children: type }),
+            required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _badge.Badge,
+              {
+                className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+                variant: "secondary",
+                children: "required"
+              }
+            )
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "p",
+        {
+          className: "pb-2 text-muted-foreground text-sm",
+          style: { paddingLeft: paddingLeft + 24 },
+          children: description
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleContent, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "divide-y border-t", children: [
+        _optionalChain([properties, 'optionalAccess', _8 => _8.map, 'call', _9 => _9((prop) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          SchemaDisplayProperty,
+          {
+            ...prop,
+            depth: depth + 1
+          },
+          prop.name
+        ))]),
+        items && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          SchemaDisplayProperty,
+          {
+            ...items,
+            depth: depth + 1,
+            name: `${name}[]`
+          }
+        )
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "py-3 pr-4", className),
+      style: { paddingLeft },
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "size-4" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono text-sm", children: name }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { className: "text-xs", variant: "outline", children: type }),
+          required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _badge.Badge,
+            {
+              className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+              variant: "secondary",
+              children: "required"
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-1 pl-6 text-muted-foreground text-sm", children: description })
+      ]
+    }
+  );
+};
+const SchemaDisplayExample = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "pre",
+  {
+    className: _utils.cn.call(void 0, 
+      "mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-sm",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.SchemaDisplay = SchemaDisplay; exports.SchemaDisplayBody = SchemaDisplayBody; exports.SchemaDisplayContent = SchemaDisplayContent; exports.SchemaDisplayDescription = SchemaDisplayDescription; exports.SchemaDisplayExample = SchemaDisplayExample; exports.SchemaDisplayHeader = SchemaDisplayHeader; exports.SchemaDisplayMethod = SchemaDisplayMethod; exports.SchemaDisplayParameter = SchemaDisplayParameter; exports.SchemaDisplayParameters = SchemaDisplayParameters; exports.SchemaDisplayPath = SchemaDisplayPath; exports.SchemaDisplayProperty = SchemaDisplayProperty; exports.SchemaDisplayRequest = SchemaDisplayRequest; exports.SchemaDisplayResponse = SchemaDisplayResponse;