@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,82 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Alert, AlertDescription } from "../ui/alert";
+import { Button } from "../ui/button";
+import { cn } from "../../lib/utils";
+import { createContext, use } from "react";
+const ConfirmationContext = createContext(
+  null
+);
+const useConfirmation = () => {
+  const context = use(ConfirmationContext);
+  if (!context) {
+    throw new Error("Confirmation components must be used within Confirmation");
+  }
+  return context;
+};
+const Confirmation = ({
+  className,
+  approval,
+  state,
+  ...props
+}) => {
+  if (!approval || state === "input-streaming" || state === "input-available") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ConfirmationContext.Provider, { value: { approval, state }, children: /* @__PURE__ */ jsx(Alert, { className: cn("flex flex-col gap-2", className), ...props }) });
+};
+const ConfirmationTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(AlertDescription, { className: cn("inline", className), ...props });
+const ConfirmationRequest = ({ children }) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return children;
+};
+const ConfirmationAccepted = ({
+  children
+}) => {
+  const { approval, state } = useConfirmation();
+  if (!approval?.approved || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+const ConfirmationRejected = ({
+  children
+}) => {
+  const { approval, state } = useConfirmation();
+  if (approval?.approved !== false || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+const ConfirmationActions = ({
+  className,
+  ...props
+}) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2 self-end", className),
+      ...props
+    }
+  );
+};
+const ConfirmationAction = (props) => /* @__PURE__ */ jsx(Button, { className: "h-8 px-3 text-sm", type: "button", ...props });
+export {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle
+};

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

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+const HALF = 0.5;
+const Connection = ({
+  fromX,
+  fromY,
+  toX,
+  toY
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "path",
+    {
+      className: "animated",
+      d: `M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`,
+      fill: "none",
+      stroke: "var(--color-ring)",
+      strokeWidth: 1
+    }
+  ),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "circle",
+    {
+      cx: toX,
+      cy: toY,
+      fill: "#fff",
+      r: 3,
+      stroke: "var(--color-ring)",
+      strokeWidth: 1
+    }
+  )
+] });
+
+
+exports.Connection = Connection;

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

@@ -0,0 +1,5 @@
+import { ConnectionLineComponent } from '@xyflow/react';
+
+declare const Connection: ConnectionLineComponent;
+
+export { Connection };

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

@@ -0,0 +1,5 @@
+import { ConnectionLineComponent } from '@xyflow/react';
+
+declare const Connection: ConnectionLineComponent;
+
+export { Connection };

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const HALF = 0.5;
+const Connection = ({
+  fromX,
+  fromY,
+  toX,
+  toY
+}) => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: "animated",
+      d: `M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`,
+      fill: "none",
+      stroke: "var(--color-ring)",
+      strokeWidth: 1
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: toX,
+      cy: toY,
+      fill: "#fff",
+      r: 3,
+      stroke: "var(--color-ring)",
+      strokeWidth: 1
+    }
+  )
+] });
+export {
+  Connection
+};

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

@@ -0,0 +1,329 @@
+"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 _button = require('../ui/button');
+
+
+
+
+var _hovercard = require('../ui/hover-card');
+var _progress = require('../ui/progress');
+var _utils = require('../../lib/utils');
+var _react = require('react');
+var _tokenlens = require('tokenlens');
+const PERCENT_MAX = 100;
+const ICON_RADIUS = 10;
+const ICON_VIEWBOX = 24;
+const ICON_CENTER = 12;
+const ICON_STROKE_WIDTH = 2;
+const ContextContext = _react.createContext.call(void 0, null);
+const useContextValue = () => {
+  const context = _react.use.call(void 0, ContextContext);
+  if (!context) {
+    throw new Error("Context components must be used within Context");
+  }
+  return context;
+};
+const Context = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}) => {
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ maxTokens, modelId, usage, usedTokens }),
+    [maxTokens, modelId, usage, usedTokens]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _hovercard.HoverCard, { closeDelay: 0, openDelay: 0, ...props }) });
+};
+const ContextIcon = () => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = usedTokens / maxTokens;
+  const dashOffset = circumference * (1 - usedPercent);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      "aria-label": "Model context usage",
+      height: "20",
+      role: "img",
+      style: { color: "currentcolor" },
+      viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`,
+      width: "20",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.25",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeWidth: ICON_STROKE_WIDTH
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.7",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeDasharray: `${circumference} ${circumference}`,
+            strokeDashoffset: dashOffset,
+            strokeLinecap: "round",
+            strokeWidth: ICON_STROKE_WIDTH,
+            style: { transform: "rotate(-90deg)", transformOrigin: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+const ContextTrigger = ({ children, ...props }) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const renderedPercent = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).format(usedPercent);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _hovercard.HoverCardTrigger, { asChild: true, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _button.Button, { type: "button", variant: "ghost", ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-muted-foreground", children: renderedPercent }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContextIcon, {})
+  ] }))) });
+};
+const ContextContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _hovercard.HoverCardContent,
+  {
+    className: _utils.cn.call(void 0, "min-w-60 divide-y overflow-hidden p-0", className),
+    ...props
+  }
+);
+const ContextContentHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).format(usedPercent);
+  const used = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(usedTokens);
+  const total = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(maxTokens);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "w-full space-y-2 p-3", className), ...props, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-3 text-xs", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: displayPct }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "font-mono text-muted-foreground", children: [
+        used,
+        " / ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _progress.Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
+  ] }))) });
+};
+const ContextContentBody = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "w-full p-3", className), ...props, children });
+const ContextContentFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { modelId, usage } = useContextValue();
+  const costUSD = modelId ? _optionalChain([_tokenlens.getUsage.call(void 0, {
+    modelId,
+    usage: {
+      input: _nullishCoalesce(_optionalChain([usage, 'optionalAccess', _ => _.inputTokens]), () => ( 0)),
+      output: _nullishCoalesce(_optionalChain([usage, 'optionalAccess', _2 => _2.outputTokens]), () => ( 0))
+    }
+  }), 'access', _3 => _3.costUSD, 'optionalAccess', _4 => _4.totalUSD]) : void 0;
+  const totalCost = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(_nullishCoalesce(costUSD, () => ( 0)));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        className
+      ),
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground", children: "Total cost" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: totalCost })
+      ] })))
+    }
+  );
+};
+const ContextInputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const inputTokens = _nullishCoalesce(_optionalChain([usage, 'optionalAccess', _5 => _5.inputTokens]), () => ( 0));
+  if (children) {
+    return children;
+  }
+  if (!inputTokens) {
+    return null;
+  }
+  const inputCost = modelId ? _optionalChain([_tokenlens.getUsage.call(void 0, {
+    modelId,
+    usage: { input: inputTokens, output: 0 }
+  }), 'access', _6 => _6.costUSD, 'optionalAccess', _7 => _7.totalUSD]) : void 0;
+  const inputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(_nullishCoalesce(inputCost, () => ( 0)));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground", children: "Input" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokensWithCost, { costText: inputCostText, tokens: inputTokens })
+      ]
+    }
+  );
+};
+const ContextOutputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const outputTokens = _nullishCoalesce(_optionalChain([usage, 'optionalAccess', _8 => _8.outputTokens]), () => ( 0));
+  if (children) {
+    return children;
+  }
+  if (!outputTokens) {
+    return null;
+  }
+  const outputCost = modelId ? _optionalChain([_tokenlens.getUsage.call(void 0, {
+    modelId,
+    usage: { input: 0, output: outputTokens }
+  }), 'access', _9 => _9.costUSD, 'optionalAccess', _10 => _10.totalUSD]) : void 0;
+  const outputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(_nullishCoalesce(outputCost, () => ( 0)));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground", children: "Output" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokensWithCost, { costText: outputCostText, tokens: outputTokens })
+      ]
+    }
+  );
+};
+const ContextReasoningUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const reasoningTokens = _nullishCoalesce(_optionalChain([usage, 'optionalAccess', _11 => _11.reasoningTokens]), () => ( 0));
+  if (children) {
+    return children;
+  }
+  if (!reasoningTokens) {
+    return null;
+  }
+  const reasoningCost = modelId ? _optionalChain([_tokenlens.getUsage.call(void 0, {
+    modelId,
+    usage: { reasoningTokens }
+  }), 'access', _12 => _12.costUSD, 'optionalAccess', _13 => _13.totalUSD]) : void 0;
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(_nullishCoalesce(reasoningCost, () => ( 0)));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground", children: "Reasoning" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })
+      ]
+    }
+  );
+};
+const ContextCacheUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const cacheTokens = _nullishCoalesce(_optionalChain([usage, 'optionalAccess', _14 => _14.cachedInputTokens]), () => ( 0));
+  if (children) {
+    return children;
+  }
+  if (!cacheTokens) {
+    return null;
+  }
+  const cacheCost = modelId ? _optionalChain([_tokenlens.getUsage.call(void 0, {
+    modelId,
+    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
+  }), 'access', _15 => _15.costUSD, 'optionalAccess', _16 => _16.totalUSD]) : void 0;
+  const cacheCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(_nullishCoalesce(cacheCost, () => ( 0)));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground", children: "Cache" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
+      ]
+    }
+  );
+};
+const TokensWithCost = ({
+  tokens,
+  costText
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+  tokens === void 0 ? "\u2014" : new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(tokens),
+  costText ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "ml-2 text-muted-foreground", children: [
+    "\u2022 ",
+    costText
+  ] }) : null
+] });
+
+
+
+
+
+
+
+
+
+
+
+exports.Context = Context; exports.ContextCacheUsage = ContextCacheUsage; exports.ContextContent = ContextContent; exports.ContextContentBody = ContextContentBody; exports.ContextContentFooter = ContextContentFooter; exports.ContextContentHeader = ContextContentHeader; exports.ContextInputUsage = ContextInputUsage; exports.ContextOutputUsage = ContextOutputUsage; exports.ContextReasoningUsage = ContextReasoningUsage; exports.ContextTrigger = ContextTrigger;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LanguageModelUsage } from 'ai';
+import { Button } from '../ui/button.cjs';
+import { HoverCard, HoverCardContent } from '../ui/hover-card.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type ModelId = string;
+interface ContextSchema {
+    usedTokens: number;
+    maxTokens: number;
+    usage?: LanguageModelUsage;
+    modelId?: ModelId;
+}
+type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+declare const Context: ({ usedTokens, maxTokens, usage, modelId, ...props }: ContextProps) => react_jsx_runtime.JSX.Element;
+type ContextTriggerProps = ComponentProps<typeof Button>;
+declare const ContextTrigger: ({ children, ...props }: ContextTriggerProps) => react_jsx_runtime.JSX.Element;
+type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+declare const ContextContent: ({ className, ...props }: ContextContentProps) => react_jsx_runtime.JSX.Element;
+type ContextContentHeaderProps = ComponentProps<"div">;
+declare const ContextContentHeader: ({ children, className, ...props }: ContextContentHeaderProps) => react_jsx_runtime.JSX.Element;
+type ContextContentBodyProps = ComponentProps<"div">;
+declare const ContextContentBody: ({ children, className, ...props }: ContextContentBodyProps) => react_jsx_runtime.JSX.Element;
+type ContextContentFooterProps = ComponentProps<"div">;
+declare const ContextContentFooter: ({ children, className, ...props }: ContextContentFooterProps) => react_jsx_runtime.JSX.Element;
+type ContextInputUsageProps = ComponentProps<"div">;
+declare const ContextInputUsage: ({ className, children, ...props }: ContextInputUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+type ContextOutputUsageProps = ComponentProps<"div">;
+declare const ContextOutputUsage: ({ className, children, ...props }: ContextOutputUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+type ContextReasoningUsageProps = ComponentProps<"div">;
+declare const ContextReasoningUsage: ({ className, children, ...props }: ContextReasoningUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+type ContextCacheUsageProps = ComponentProps<"div">;
+declare const ContextCacheUsage: ({ className, children, ...props }: ContextCacheUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+export { Context, ContextCacheUsage, type ContextCacheUsageProps, ContextContent, ContextContentBody, type ContextContentBodyProps, ContextContentFooter, type ContextContentFooterProps, ContextContentHeader, type ContextContentHeaderProps, type ContextContentProps, ContextInputUsage, type ContextInputUsageProps, ContextOutputUsage, type ContextOutputUsageProps, type ContextProps, ContextReasoningUsage, type ContextReasoningUsageProps, ContextTrigger, type ContextTriggerProps };

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LanguageModelUsage } from 'ai';
+import { Button } from '../ui/button.js';
+import { HoverCard, HoverCardContent } from '../ui/hover-card.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type ModelId = string;
+interface ContextSchema {
+    usedTokens: number;
+    maxTokens: number;
+    usage?: LanguageModelUsage;
+    modelId?: ModelId;
+}
+type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+declare const Context: ({ usedTokens, maxTokens, usage, modelId, ...props }: ContextProps) => react_jsx_runtime.JSX.Element;
+type ContextTriggerProps = ComponentProps<typeof Button>;
+declare const ContextTrigger: ({ children, ...props }: ContextTriggerProps) => react_jsx_runtime.JSX.Element;
+type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+declare const ContextContent: ({ className, ...props }: ContextContentProps) => react_jsx_runtime.JSX.Element;
+type ContextContentHeaderProps = ComponentProps<"div">;
+declare const ContextContentHeader: ({ children, className, ...props }: ContextContentHeaderProps) => react_jsx_runtime.JSX.Element;
+type ContextContentBodyProps = ComponentProps<"div">;
+declare const ContextContentBody: ({ children, className, ...props }: ContextContentBodyProps) => react_jsx_runtime.JSX.Element;
+type ContextContentFooterProps = ComponentProps<"div">;
+declare const ContextContentFooter: ({ children, className, ...props }: ContextContentFooterProps) => react_jsx_runtime.JSX.Element;
+type ContextInputUsageProps = ComponentProps<"div">;
+declare const ContextInputUsage: ({ className, children, ...props }: ContextInputUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+type ContextOutputUsageProps = ComponentProps<"div">;
+declare const ContextOutputUsage: ({ className, children, ...props }: ContextOutputUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+type ContextReasoningUsageProps = ComponentProps<"div">;
+declare const ContextReasoningUsage: ({ className, children, ...props }: ContextReasoningUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+type ContextCacheUsageProps = ComponentProps<"div">;
+declare const ContextCacheUsage: ({ className, children, ...props }: ContextCacheUsageProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+export { Context, ContextCacheUsage, type ContextCacheUsageProps, ContextContent, ContextContentBody, type ContextContentBodyProps, ContextContentFooter, type ContextContentFooterProps, ContextContentHeader, type ContextContentHeaderProps, type ContextContentProps, ContextInputUsage, type ContextInputUsageProps, ContextOutputUsage, type ContextOutputUsageProps, type ContextProps, ContextReasoningUsage, type ContextReasoningUsageProps, ContextTrigger, type ContextTriggerProps };