@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, HTMLAttributes } from 'react';
+import { Avatar } from '../ui/avatar.cjs';
+import { Button } from '../ui/button.cjs';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.cjs';
+import { FileIcon } from 'lucide-react';
+import 'radix-ui';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type CommitProps = ComponentProps<typeof Collapsible>;
+declare const Commit: ({ className, children, ...props }: CommitProps) => react_jsx_runtime.JSX.Element;
+type CommitHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const CommitHeader: ({ className, children, ...props }: CommitHeaderProps) => react_jsx_runtime.JSX.Element;
+type CommitHashProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitHash: ({ className, children, ...props }: CommitHashProps) => react_jsx_runtime.JSX.Element;
+type CommitMessageProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitMessage: ({ className, children, ...props }: CommitMessageProps) => react_jsx_runtime.JSX.Element;
+type CommitMetadataProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitMetadata: ({ className, children, ...props }: CommitMetadataProps) => react_jsx_runtime.JSX.Element;
+type CommitSeparatorProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitSeparator: ({ className, children, ...props }: CommitSeparatorProps) => react_jsx_runtime.JSX.Element;
+type CommitInfoProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitInfo: ({ className, children, ...props }: CommitInfoProps) => react_jsx_runtime.JSX.Element;
+type CommitAuthorProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitAuthor: ({ className, children, ...props }: CommitAuthorProps) => react_jsx_runtime.JSX.Element;
+type CommitAuthorAvatarProps = ComponentProps<typeof Avatar> & {
+    initials: string;
+};
+declare const CommitAuthorAvatar: ({ initials, className, ...props }: CommitAuthorAvatarProps) => react_jsx_runtime.JSX.Element;
+type CommitTimestampProps = HTMLAttributes<HTMLTimeElement> & {
+    date: Date;
+};
+declare const CommitTimestamp: ({ date, className, children, ...props }: CommitTimestampProps) => react_jsx_runtime.JSX.Element;
+type CommitActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitActions: ({ className, children, ...props }: CommitActionsProps) => react_jsx_runtime.JSX.Element;
+type CommitCopyButtonProps = ComponentProps<typeof Button> & {
+    hash: string;
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const CommitCopyButton: ({ hash, onCopy, onError, timeout, children, className, ...props }: CommitCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type CommitContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const CommitContent: ({ className, children, ...props }: CommitContentProps) => react_jsx_runtime.JSX.Element;
+type CommitFilesProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFiles: ({ className, children, ...props }: CommitFilesProps) => react_jsx_runtime.JSX.Element;
+type CommitFileProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFile: ({ className, children, ...props }: CommitFileProps) => react_jsx_runtime.JSX.Element;
+type CommitFileInfoProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFileInfo: ({ className, children, ...props }: CommitFileInfoProps) => react_jsx_runtime.JSX.Element;
+type CommitFileStatusProps = HTMLAttributes<HTMLSpanElement> & {
+    status: "added" | "modified" | "deleted" | "renamed";
+};
+declare const CommitFileStatus: ({ status, className, children, ...props }: CommitFileStatusProps) => react_jsx_runtime.JSX.Element;
+type CommitFileIconProps = ComponentProps<typeof FileIcon>;
+declare const CommitFileIcon: ({ className, ...props }: CommitFileIconProps) => react_jsx_runtime.JSX.Element;
+type CommitFilePathProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitFilePath: ({ className, children, ...props }: CommitFilePathProps) => react_jsx_runtime.JSX.Element;
+type CommitFileChangesProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFileChanges: ({ className, children, ...props }: CommitFileChangesProps) => react_jsx_runtime.JSX.Element;
+type CommitFileAdditionsProps = HTMLAttributes<HTMLSpanElement> & {
+    count: number;
+};
+declare const CommitFileAdditions: ({ count, className, children, ...props }: CommitFileAdditionsProps) => react_jsx_runtime.JSX.Element | null;
+type CommitFileDeletionsProps = HTMLAttributes<HTMLSpanElement> & {
+    count: number;
+};
+declare const CommitFileDeletions: ({ count, className, children, ...props }: CommitFileDeletionsProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Commit, CommitActions, type CommitActionsProps, CommitAuthor, CommitAuthorAvatar, type CommitAuthorAvatarProps, type CommitAuthorProps, CommitContent, type CommitContentProps, CommitCopyButton, type CommitCopyButtonProps, CommitFile, CommitFileAdditions, type CommitFileAdditionsProps, CommitFileChanges, type CommitFileChangesProps, CommitFileDeletions, type CommitFileDeletionsProps, CommitFileIcon, type CommitFileIconProps, CommitFileInfo, type CommitFileInfoProps, CommitFilePath, type CommitFilePathProps, type CommitFileProps, CommitFileStatus, type CommitFileStatusProps, CommitFiles, type CommitFilesProps, CommitHash, type CommitHashProps, CommitHeader, type CommitHeaderProps, CommitInfo, type CommitInfoProps, CommitMessage, type CommitMessageProps, CommitMetadata, type CommitMetadataProps, type CommitProps, CommitSeparator, type CommitSeparatorProps, CommitTimestamp, type CommitTimestampProps };

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

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, HTMLAttributes } from 'react';
+import { Avatar } from '../ui/avatar.js';
+import { Button } from '../ui/button.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.js';
+import { FileIcon } from 'lucide-react';
+import 'radix-ui';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type CommitProps = ComponentProps<typeof Collapsible>;
+declare const Commit: ({ className, children, ...props }: CommitProps) => react_jsx_runtime.JSX.Element;
+type CommitHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const CommitHeader: ({ className, children, ...props }: CommitHeaderProps) => react_jsx_runtime.JSX.Element;
+type CommitHashProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitHash: ({ className, children, ...props }: CommitHashProps) => react_jsx_runtime.JSX.Element;
+type CommitMessageProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitMessage: ({ className, children, ...props }: CommitMessageProps) => react_jsx_runtime.JSX.Element;
+type CommitMetadataProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitMetadata: ({ className, children, ...props }: CommitMetadataProps) => react_jsx_runtime.JSX.Element;
+type CommitSeparatorProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitSeparator: ({ className, children, ...props }: CommitSeparatorProps) => react_jsx_runtime.JSX.Element;
+type CommitInfoProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitInfo: ({ className, children, ...props }: CommitInfoProps) => react_jsx_runtime.JSX.Element;
+type CommitAuthorProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitAuthor: ({ className, children, ...props }: CommitAuthorProps) => react_jsx_runtime.JSX.Element;
+type CommitAuthorAvatarProps = ComponentProps<typeof Avatar> & {
+    initials: string;
+};
+declare const CommitAuthorAvatar: ({ initials, className, ...props }: CommitAuthorAvatarProps) => react_jsx_runtime.JSX.Element;
+type CommitTimestampProps = HTMLAttributes<HTMLTimeElement> & {
+    date: Date;
+};
+declare const CommitTimestamp: ({ date, className, children, ...props }: CommitTimestampProps) => react_jsx_runtime.JSX.Element;
+type CommitActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitActions: ({ className, children, ...props }: CommitActionsProps) => react_jsx_runtime.JSX.Element;
+type CommitCopyButtonProps = ComponentProps<typeof Button> & {
+    hash: string;
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const CommitCopyButton: ({ hash, onCopy, onError, timeout, children, className, ...props }: CommitCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type CommitContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const CommitContent: ({ className, children, ...props }: CommitContentProps) => react_jsx_runtime.JSX.Element;
+type CommitFilesProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFiles: ({ className, children, ...props }: CommitFilesProps) => react_jsx_runtime.JSX.Element;
+type CommitFileProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFile: ({ className, children, ...props }: CommitFileProps) => react_jsx_runtime.JSX.Element;
+type CommitFileInfoProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFileInfo: ({ className, children, ...props }: CommitFileInfoProps) => react_jsx_runtime.JSX.Element;
+type CommitFileStatusProps = HTMLAttributes<HTMLSpanElement> & {
+    status: "added" | "modified" | "deleted" | "renamed";
+};
+declare const CommitFileStatus: ({ status, className, children, ...props }: CommitFileStatusProps) => react_jsx_runtime.JSX.Element;
+type CommitFileIconProps = ComponentProps<typeof FileIcon>;
+declare const CommitFileIcon: ({ className, ...props }: CommitFileIconProps) => react_jsx_runtime.JSX.Element;
+type CommitFilePathProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitFilePath: ({ className, children, ...props }: CommitFilePathProps) => react_jsx_runtime.JSX.Element;
+type CommitFileChangesProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFileChanges: ({ className, children, ...props }: CommitFileChangesProps) => react_jsx_runtime.JSX.Element;
+type CommitFileAdditionsProps = HTMLAttributes<HTMLSpanElement> & {
+    count: number;
+};
+declare const CommitFileAdditions: ({ count, className, children, ...props }: CommitFileAdditionsProps) => react_jsx_runtime.JSX.Element | null;
+type CommitFileDeletionsProps = HTMLAttributes<HTMLSpanElement> & {
+    count: number;
+};
+declare const CommitFileDeletions: ({ count, className, children, ...props }: CommitFileDeletionsProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Commit, CommitActions, type CommitActionsProps, CommitAuthor, CommitAuthorAvatar, type CommitAuthorAvatarProps, type CommitAuthorProps, CommitContent, type CommitContentProps, CommitCopyButton, type CommitCopyButtonProps, CommitFile, CommitFileAdditions, type CommitFileAdditionsProps, CommitFileChanges, type CommitFileChangesProps, CommitFileDeletions, type CommitFileDeletionsProps, CommitFileIcon, type CommitFileIconProps, CommitFileInfo, type CommitFileInfoProps, CommitFilePath, type CommitFilePathProps, type CommitFileProps, CommitFileStatus, type CommitFileStatusProps, CommitFiles, type CommitFilesProps, CommitHash, type CommitHashProps, CommitHeader, type CommitHeaderProps, CommitInfo, type CommitInfoProps, CommitMessage, type CommitMessageProps, CommitMetadata, type CommitMetadataProps, type CommitProps, CommitSeparator, type CommitSeparatorProps, CommitTimestamp, type CommitTimestampProps };

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

@@ -0,0 +1,337 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback } from "../ui/avatar";
+import { Button } from "../ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import {
+  CheckIcon,
+  CopyIcon,
+  FileIcon,
+  GitCommitIcon,
+  MinusIcon,
+  PlusIcon
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+const Commit = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("rounded-lg border bg-background", className),
+    ...props,
+    children
+  }
+);
+const CommitHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "group flex cursor-pointer items-center justify-between gap-4 p-3 text-left transition-colors hover:opacity-80",
+      className
+    ),
+    children
+  }
+) });
+const CommitHash = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs("span", { className: cn("font-mono text-xs", className), ...props, children: [
+  /* @__PURE__ */ jsx(GitCommitIcon, { className: "mr-1 inline-block size-3" }),
+  children
+] });
+const CommitMessage = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("font-medium text-sm", className), ...props, children });
+const CommitMetadata = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-2 text-muted-foreground text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const CommitSeparator = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className, ...props, children: children ?? "\u2022" });
+const CommitInfo = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-1 flex-col", className), ...props, children });
+const CommitAuthor = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center", className), ...props, children });
+const CommitAuthorAvatar = ({
+  initials,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Avatar, { className: cn("size-8", className), ...props, children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: initials }) });
+const relativeTimeFormat = new Intl.RelativeTimeFormat("en", {
+  numeric: "auto"
+});
+const CommitTimestamp = ({
+  date,
+  className,
+  children,
+  ...props
+}) => {
+  const formatted = relativeTimeFormat.format(
+    Math.round((date.getTime() - Date.now()) / (1e3 * 60 * 60 * 24)),
+    "day"
+  );
+  return /* @__PURE__ */ jsx(
+    "time",
+    {
+      className: cn("text-xs", className),
+      dateTime: date.toISOString(),
+      ...props,
+      children: children ?? formatted
+    }
+  );
+};
+const handleActionsClick = (e) => e.stopPropagation();
+const handleActionsKeyDown = (e) => e.stopPropagation();
+const CommitActions = ({
+  className,
+  children,
+  ...props
+}) => (
+  // biome-ignore lint/a11y/noNoninteractiveElementInteractions: stopPropagation required for nested interactions
+  // biome-ignore lint/a11y/useSemanticElements: fieldset doesn't fit this UI pattern
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-1", className),
+      onClick: handleActionsClick,
+      onKeyDown: handleActionsKeyDown,
+      role: "group",
+      ...props,
+      children
+    }
+  )
+);
+const CommitCopyButton = ({
+  hash,
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(hash);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      }
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [hash, onCopy, onError, timeout, isCopied]);
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("size-7 shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { size: 14 })
+    }
+  );
+};
+const CommitContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("border-t p-3", className), ...props, children });
+const CommitFiles = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), ...props, children });
+const CommitFile = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const CommitFileInfo = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-2", className), ...props, children });
+const fileStatusStyles = {
+  added: "text-green-600 dark:text-green-400",
+  deleted: "text-red-600 dark:text-red-400",
+  modified: "text-yellow-600 dark:text-yellow-400",
+  renamed: "text-blue-600 dark:text-blue-400"
+};
+const fileStatusLabels = {
+  added: "A",
+  deleted: "D",
+  modified: "M",
+  renamed: "R"
+};
+const CommitFileStatus = ({
+  status,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "font-medium font-mono text-xs",
+      fileStatusStyles[status],
+      className
+    ),
+    ...props,
+    children: children ?? fileStatusLabels[status]
+  }
+);
+const CommitFileIcon = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  FileIcon,
+  {
+    className: cn("size-3.5 shrink-0 text-muted-foreground", className),
+    ...props
+  }
+);
+const CommitFilePath = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("truncate font-mono text-xs", className), ...props, children });
+const CommitFileChanges = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex shrink-0 items-center gap-1 font-mono text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const CommitFileAdditions = ({
+  count,
+  className,
+  children,
+  ...props
+}) => {
+  if (count <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-green-600 dark:text-green-400", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PlusIcon, { className: "inline-block size-3" }),
+        count
+      ] })
+    }
+  );
+};
+const CommitFileDeletions = ({
+  count,
+  className,
+  children,
+  ...props
+}) => {
+  if (count <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-red-600 dark:text-red-400", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MinusIcon, { className: "inline-block size-3" }),
+        count
+      ] })
+    }
+  );
+};
+export {
+  Commit,
+  CommitActions,
+  CommitAuthor,
+  CommitAuthorAvatar,
+  CommitContent,
+  CommitCopyButton,
+  CommitFile,
+  CommitFileAdditions,
+  CommitFileChanges,
+  CommitFileDeletions,
+  CommitFileIcon,
+  CommitFileInfo,
+  CommitFilePath,
+  CommitFileStatus,
+  CommitFiles,
+  CommitHash,
+  CommitHeader,
+  CommitInfo,
+  CommitMessage,
+  CommitMetadata,
+  CommitSeparator,
+  CommitTimestamp
+};

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

@@ -0,0 +1,82 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _alert = require('../ui/alert');
+var _button = require('../ui/button');
+var _utils = require('../../lib/utils');
+var _react = require('react');
+const ConfirmationContext = _react.createContext.call(void 0, 
+  null
+);
+const useConfirmation = () => {
+  const context = _react.use.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, ConfirmationContext.Provider, { value: { approval, state }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _alert.Alert, { className: _utils.cn.call(void 0, "flex flex-col gap-2", className), ...props }) });
+};
+const ConfirmationTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _alert.AlertDescription, { className: _utils.cn.call(void 0, "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 (!_optionalChain([approval, 'optionalAccess', _ => _.approved]) || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+const ConfirmationRejected = ({
+  children
+}) => {
+  const { approval, state } = useConfirmation();
+  if (_optionalChain([approval, 'optionalAccess', _2 => _2.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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "flex items-center justify-end gap-2 self-end", className),
+      ...props
+    }
+  );
+};
+const ConfirmationAction = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { className: "h-8 px-3 text-sm", type: "button", ...props });
+
+
+
+
+
+
+
+
+exports.Confirmation = Confirmation; exports.ConfirmationAccepted = ConfirmationAccepted; exports.ConfirmationAction = ConfirmationAction; exports.ConfirmationActions = ConfirmationActions; exports.ConfirmationRejected = ConfirmationRejected; exports.ConfirmationRequest = ConfirmationRequest; exports.ConfirmationTitle = ConfirmationTitle;

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

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToolUIPart } from 'ai';
+import { ComponentProps, ReactNode } from 'react';
+import { Alert, AlertDescription } from '../ui/alert.cjs';
+import { Button } from '../ui/button.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ToolUIPartApproval = {
+    id: string;
+    approved?: never;
+    reason?: never;
+} | {
+    id: string;
+    approved: boolean;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: false;
+    reason?: string;
+} | undefined;
+type ConfirmationProps = ComponentProps<typeof Alert> & {
+    approval?: ToolUIPartApproval;
+    state: ToolUIPart["state"];
+};
+declare const Confirmation: ({ className, approval, state, ...props }: ConfirmationProps) => react_jsx_runtime.JSX.Element | null;
+type ConfirmationTitleProps = ComponentProps<typeof AlertDescription>;
+declare const ConfirmationTitle: ({ className, ...props }: ConfirmationTitleProps) => react_jsx_runtime.JSX.Element;
+interface ConfirmationRequestProps {
+    children?: ReactNode;
+}
+declare const ConfirmationRequest: ({ children }: ConfirmationRequestProps) => ReactNode;
+interface ConfirmationAcceptedProps {
+    children?: ReactNode;
+}
+declare const ConfirmationAccepted: ({ children, }: ConfirmationAcceptedProps) => ReactNode;
+interface ConfirmationRejectedProps {
+    children?: ReactNode;
+}
+declare const ConfirmationRejected: ({ children, }: ConfirmationRejectedProps) => ReactNode;
+type ConfirmationActionsProps = ComponentProps<"div">;
+declare const ConfirmationActions: ({ className, ...props }: ConfirmationActionsProps) => react_jsx_runtime.JSX.Element | null;
+type ConfirmationActionProps = ComponentProps<typeof Button>;
+declare const ConfirmationAction: (props: ConfirmationActionProps) => react_jsx_runtime.JSX.Element;
+
+export { Confirmation, ConfirmationAccepted, type ConfirmationAcceptedProps, ConfirmationAction, type ConfirmationActionProps, ConfirmationActions, type ConfirmationActionsProps, type ConfirmationProps, ConfirmationRejected, type ConfirmationRejectedProps, ConfirmationRequest, type ConfirmationRequestProps, ConfirmationTitle, type ConfirmationTitleProps };

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

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToolUIPart } from 'ai';
+import { ComponentProps, ReactNode } from 'react';
+import { Alert, AlertDescription } from '../ui/alert.js';
+import { Button } from '../ui/button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ToolUIPartApproval = {
+    id: string;
+    approved?: never;
+    reason?: never;
+} | {
+    id: string;
+    approved: boolean;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: false;
+    reason?: string;
+} | undefined;
+type ConfirmationProps = ComponentProps<typeof Alert> & {
+    approval?: ToolUIPartApproval;
+    state: ToolUIPart["state"];
+};
+declare const Confirmation: ({ className, approval, state, ...props }: ConfirmationProps) => react_jsx_runtime.JSX.Element | null;
+type ConfirmationTitleProps = ComponentProps<typeof AlertDescription>;
+declare const ConfirmationTitle: ({ className, ...props }: ConfirmationTitleProps) => react_jsx_runtime.JSX.Element;
+interface ConfirmationRequestProps {
+    children?: ReactNode;
+}
+declare const ConfirmationRequest: ({ children }: ConfirmationRequestProps) => ReactNode;
+interface ConfirmationAcceptedProps {
+    children?: ReactNode;
+}
+declare const ConfirmationAccepted: ({ children, }: ConfirmationAcceptedProps) => ReactNode;
+interface ConfirmationRejectedProps {
+    children?: ReactNode;
+}
+declare const ConfirmationRejected: ({ children, }: ConfirmationRejectedProps) => ReactNode;
+type ConfirmationActionsProps = ComponentProps<"div">;
+declare const ConfirmationActions: ({ className, ...props }: ConfirmationActionsProps) => react_jsx_runtime.JSX.Element | null;
+type ConfirmationActionProps = ComponentProps<typeof Button>;
+declare const ConfirmationAction: (props: ConfirmationActionProps) => react_jsx_runtime.JSX.Element;
+
+export { Confirmation, ConfirmationAccepted, type ConfirmationAcceptedProps, ConfirmationAction, type ConfirmationActionProps, ConfirmationActions, type ConfirmationActionsProps, type ConfirmationProps, ConfirmationRejected, type ConfirmationRejectedProps, ConfirmationRequest, type ConfirmationRequestProps, ConfirmationTitle, type ConfirmationTitleProps };