@sero-ai/ui 0.3.0 → 0.3.1

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

@@ -0,0 +1,89 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+
+var _accordion = require('../ui/accordion');
+var _badge = require('../ui/badge');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+var _codeblock = require('./code-block');
+const Agent = _react.memo.call(void 0, ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, "not-prose w-full rounded-md border", className),
+    ...props
+  }
+));
+const AgentHeader = _react.memo.call(void 0, 
+  ({ className, name, model, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      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.BotIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-sm", children: name }),
+        model && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { className: "font-mono text-xs", variant: "secondary", children: model })
+      ] })
+    }
+  )
+);
+const AgentContent = _react.memo.call(void 0, 
+  ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "space-y-4 p-4 pt-0", className), ...props })
+);
+const AgentInstructions = _react.memo.call(void 0, 
+  ({ className, children, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "space-y-2", className), ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-muted-foreground text-sm", children: "Instructions" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-md bg-muted/50 p-3 text-muted-foreground text-sm", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children }) })
+  ] })
+);
+const AgentTools = _react.memo.call(void 0, ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "space-y-2", className), children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-muted-foreground text-sm", children: "Tools" }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _accordion.Accordion, { className: "rounded-md border", ...props })
+] }));
+const AgentTool = _react.memo.call(void 0, 
+  ({ className, tool, value, ...props }) => {
+    const schema = "jsonSchema" in tool && tool.jsonSchema ? tool.jsonSchema : tool.inputSchema;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _accordion.AccordionItem,
+      {
+        className: _utils.cn.call(void 0, "border-b last:border-b-0", className),
+        value,
+        ...props,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _accordion.AccordionTrigger, { className: "px-3 py-2 text-sm hover:no-underline", children: _nullishCoalesce(tool.description, () => ( "No description")) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _accordion.AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _codeblock.CodeBlock, { code: JSON.stringify(schema, null, 2), language: "json" }) }) })
+        ]
+      }
+    );
+  }
+);
+const AgentOutput = _react.memo.call(void 0, 
+  ({ className, schema, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "space-y-2", className), ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-muted-foreground text-sm", children: "Output Schema" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _codeblock.CodeBlock, { code: schema, language: "typescript" }) })
+  ] })
+);
+Agent.displayName = "Agent";
+AgentHeader.displayName = "AgentHeader";
+AgentContent.displayName = "AgentContent";
+AgentInstructions.displayName = "AgentInstructions";
+AgentTools.displayName = "AgentTools";
+AgentTool.displayName = "AgentTool";
+AgentOutput.displayName = "AgentOutput";
+
+
+
+
+
+
+
+
+exports.Agent = Agent; exports.AgentContent = AgentContent; exports.AgentHeader = AgentHeader; exports.AgentInstructions = AgentInstructions; exports.AgentOutput = AgentOutput; exports.AgentTool = AgentTool; exports.AgentTools = AgentTools;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tool } from 'ai';
+import { AccordionItem, Accordion } from '../ui/accordion.cjs';
+import 'radix-ui';
+
+type AgentProps = ComponentProps<"div">;
+declare const Agent: React.MemoExoticComponent<({ className, ...props }: AgentProps) => react_jsx_runtime.JSX.Element>;
+type AgentHeaderProps = ComponentProps<"div"> & {
+    name: string;
+    model?: string;
+};
+declare const AgentHeader: React.MemoExoticComponent<({ className, name, model, ...props }: AgentHeaderProps) => react_jsx_runtime.JSX.Element>;
+type AgentContentProps = ComponentProps<"div">;
+declare const AgentContent: React.MemoExoticComponent<({ className, ...props }: AgentContentProps) => react_jsx_runtime.JSX.Element>;
+type AgentInstructionsProps = ComponentProps<"div"> & {
+    children: string;
+};
+declare const AgentInstructions: React.MemoExoticComponent<({ className, children, ...props }: AgentInstructionsProps) => react_jsx_runtime.JSX.Element>;
+type AgentToolsProps = ComponentProps<typeof Accordion>;
+declare const AgentTools: React.MemoExoticComponent<({ className, ...props }: AgentToolsProps) => react_jsx_runtime.JSX.Element>;
+type AgentToolProps = ComponentProps<typeof AccordionItem> & {
+    tool: Tool;
+};
+declare const AgentTool: React.MemoExoticComponent<({ className, tool, value, ...props }: AgentToolProps) => react_jsx_runtime.JSX.Element>;
+type AgentOutputProps = ComponentProps<"div"> & {
+    schema: string;
+};
+declare const AgentOutput: React.MemoExoticComponent<({ className, schema, ...props }: AgentOutputProps) => react_jsx_runtime.JSX.Element>;
+
+export { Agent, AgentContent, type AgentContentProps, AgentHeader, type AgentHeaderProps, AgentInstructions, type AgentInstructionsProps, AgentOutput, type AgentOutputProps, type AgentProps, AgentTool, type AgentToolProps, AgentTools, type AgentToolsProps };

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tool } from 'ai';
+import { AccordionItem, Accordion } from '../ui/accordion.js';
+import 'radix-ui';
+
+type AgentProps = ComponentProps<"div">;
+declare const Agent: React.MemoExoticComponent<({ className, ...props }: AgentProps) => react_jsx_runtime.JSX.Element>;
+type AgentHeaderProps = ComponentProps<"div"> & {
+    name: string;
+    model?: string;
+};
+declare const AgentHeader: React.MemoExoticComponent<({ className, name, model, ...props }: AgentHeaderProps) => react_jsx_runtime.JSX.Element>;
+type AgentContentProps = ComponentProps<"div">;
+declare const AgentContent: React.MemoExoticComponent<({ className, ...props }: AgentContentProps) => react_jsx_runtime.JSX.Element>;
+type AgentInstructionsProps = ComponentProps<"div"> & {
+    children: string;
+};
+declare const AgentInstructions: React.MemoExoticComponent<({ className, children, ...props }: AgentInstructionsProps) => react_jsx_runtime.JSX.Element>;
+type AgentToolsProps = ComponentProps<typeof Accordion>;
+declare const AgentTools: React.MemoExoticComponent<({ className, ...props }: AgentToolsProps) => react_jsx_runtime.JSX.Element>;
+type AgentToolProps = ComponentProps<typeof AccordionItem> & {
+    tool: Tool;
+};
+declare const AgentTool: React.MemoExoticComponent<({ className, tool, value, ...props }: AgentToolProps) => react_jsx_runtime.JSX.Element>;
+type AgentOutputProps = ComponentProps<"div"> & {
+    schema: string;
+};
+declare const AgentOutput: React.MemoExoticComponent<({ className, schema, ...props }: AgentOutputProps) => react_jsx_runtime.JSX.Element>;
+
+export { Agent, AgentContent, type AgentContentProps, AgentHeader, type AgentHeaderProps, AgentInstructions, type AgentInstructionsProps, AgentOutput, type AgentOutputProps, type AgentProps, AgentTool, type AgentToolProps, AgentTools, type AgentToolsProps };

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

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "../ui/accordion";
+import { Badge } from "../ui/badge";
+import { cn } from "../../lib/utils";
+import { BotIcon } from "lucide-react";
+import { memo } from "react";
+import { CodeBlock } from "./code-block";
+const Agent = memo(({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("not-prose w-full rounded-md border", className),
+    ...props
+  }
+));
+const AgentHeader = memo(
+  ({ className, name, model, ...props }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      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(BotIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: name }),
+        model && /* @__PURE__ */ jsx(Badge, { className: "font-mono text-xs", variant: "secondary", children: model })
+      ] })
+    }
+  )
+);
+const AgentContent = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("space-y-4 p-4 pt-0", className), ...props })
+);
+const AgentInstructions = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-sm", children: "Instructions" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50 p-3 text-muted-foreground text-sm", children: /* @__PURE__ */ jsx("p", { children }) })
+  ] })
+);
+const AgentTools = memo(({ className, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+  /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-sm", children: "Tools" }),
+  /* @__PURE__ */ jsx(Accordion, { className: "rounded-md border", ...props })
+] }));
+const AgentTool = memo(
+  ({ className, tool, value, ...props }) => {
+    const schema = "jsonSchema" in tool && tool.jsonSchema ? tool.jsonSchema : tool.inputSchema;
+    return /* @__PURE__ */ jsxs(
+      AccordionItem,
+      {
+        className: cn("border-b last:border-b-0", className),
+        value,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-3 py-2 text-sm hover:no-underline", children: tool.description ?? "No description" }),
+          /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx(CodeBlock, { code: JSON.stringify(schema, null, 2), language: "json" }) }) })
+        ]
+      }
+    );
+  }
+);
+const AgentOutput = memo(
+  ({ className, schema, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-sm", children: "Output Schema" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx(CodeBlock, { code: schema, language: "typescript" }) })
+  ] })
+);
+Agent.displayName = "Agent";
+AgentHeader.displayName = "AgentHeader";
+AgentContent.displayName = "AgentContent";
+AgentInstructions.displayName = "AgentInstructions";
+AgentTools.displayName = "AgentTools";
+AgentTool.displayName = "AgentTool";
+AgentOutput.displayName = "AgentOutput";
+export {
+  Agent,
+  AgentContent,
+  AgentHeader,
+  AgentInstructions,
+  AgentOutput,
+  AgentTool,
+  AgentTools
+};

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

@@ -0,0 +1,121 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+
+
+
+
+
+var _tooltip = require('../ui/tooltip');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+const Artifact = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      className
+    ),
+    ...props
+  }
+);
+const ArtifactHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
+      className
+    ),
+    ...props
+  }
+);
+const ArtifactClose = ({
+  className,
+  children,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _button.Button,
+  {
+    className: _utils.cn.call(void 0, 
+      "size-8 p-0 text-muted-foreground hover:text-foreground",
+      className
+    ),
+    size,
+    type: "button",
+    variant,
+    ...props,
+    children: [
+      _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XIcon, { className: "size-4" }))),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Close" })
+    ]
+  }
+);
+const ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "p",
+  {
+    className: _utils.cn.call(void 0, "font-medium text-foreground text-sm", className),
+    ...props
+  }
+);
+const ArtifactDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: _utils.cn.call(void 0, "text-muted-foreground text-sm", className), ...props });
+const ArtifactActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex items-center gap-1", className), ...props });
+const ArtifactAction = ({
+  tooltip,
+  label,
+  icon: Icon,
+  children,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _button.Button,
+    {
+      className: _utils.cn.call(void 0, 
+        "size-8 p-0 text-muted-foreground hover:text-foreground",
+        className
+      ),
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: [
+        Icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: "size-4" }) : children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: label || tooltip })
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _tooltip.Tooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+const ArtifactContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex-1 overflow-auto p-4", className), ...props });
+
+
+
+
+
+
+
+
+
+exports.Artifact = Artifact; exports.ArtifactAction = ArtifactAction; exports.ArtifactActions = ArtifactActions; exports.ArtifactClose = ArtifactClose; exports.ArtifactContent = ArtifactContent; exports.ArtifactDescription = ArtifactDescription; exports.ArtifactHeader = ArtifactHeader; exports.ArtifactTitle = ArtifactTitle;

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

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Button } from '../ui/button.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+declare const Artifact: ({ className, ...props }: ArtifactProps) => react_jsx_runtime.JSX.Element;
+type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactHeader: ({ className, ...props }: ArtifactHeaderProps) => react_jsx_runtime.JSX.Element;
+type ArtifactCloseProps = ComponentProps<typeof Button>;
+declare const ArtifactClose: ({ className, children, size, variant, ...props }: ArtifactCloseProps) => react_jsx_runtime.JSX.Element;
+type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+declare const ArtifactTitle: ({ className, ...props }: ArtifactTitleProps) => react_jsx_runtime.JSX.Element;
+type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+declare const ArtifactDescription: ({ className, ...props }: ArtifactDescriptionProps) => react_jsx_runtime.JSX.Element;
+type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactActions: ({ className, ...props }: ArtifactActionsProps) => react_jsx_runtime.JSX.Element;
+type ArtifactActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+    icon?: LucideIcon;
+};
+declare const ArtifactAction: ({ tooltip, label, icon: Icon, children, className, size, variant, ...props }: ArtifactActionProps) => react_jsx_runtime.JSX.Element;
+type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactContent: ({ className, ...props }: ArtifactContentProps) => react_jsx_runtime.JSX.Element;
+
+export { Artifact, ArtifactAction, type ArtifactActionProps, ArtifactActions, type ArtifactActionsProps, ArtifactClose, type ArtifactCloseProps, ArtifactContent, type ArtifactContentProps, ArtifactDescription, type ArtifactDescriptionProps, ArtifactHeader, type ArtifactHeaderProps, type ArtifactProps, ArtifactTitle, type ArtifactTitleProps };

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

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Button } from '../ui/button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+declare const Artifact: ({ className, ...props }: ArtifactProps) => react_jsx_runtime.JSX.Element;
+type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactHeader: ({ className, ...props }: ArtifactHeaderProps) => react_jsx_runtime.JSX.Element;
+type ArtifactCloseProps = ComponentProps<typeof Button>;
+declare const ArtifactClose: ({ className, children, size, variant, ...props }: ArtifactCloseProps) => react_jsx_runtime.JSX.Element;
+type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+declare const ArtifactTitle: ({ className, ...props }: ArtifactTitleProps) => react_jsx_runtime.JSX.Element;
+type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+declare const ArtifactDescription: ({ className, ...props }: ArtifactDescriptionProps) => react_jsx_runtime.JSX.Element;
+type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactActions: ({ className, ...props }: ArtifactActionsProps) => react_jsx_runtime.JSX.Element;
+type ArtifactActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+    icon?: LucideIcon;
+};
+declare const ArtifactAction: ({ tooltip, label, icon: Icon, children, className, size, variant, ...props }: ArtifactActionProps) => react_jsx_runtime.JSX.Element;
+type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactContent: ({ className, ...props }: ArtifactContentProps) => react_jsx_runtime.JSX.Element;
+
+export { Artifact, ArtifactAction, type ArtifactActionProps, ArtifactActions, type ArtifactActionsProps, ArtifactClose, type ArtifactCloseProps, ArtifactContent, type ArtifactContentProps, ArtifactDescription, type ArtifactDescriptionProps, ArtifactHeader, type ArtifactHeaderProps, type ArtifactProps, ArtifactTitle, type ArtifactTitleProps };

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

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../ui/tooltip";
+import { cn } from "../../lib/utils";
+import { XIcon } from "lucide-react";
+const Artifact = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      className
+    ),
+    ...props
+  }
+);
+const ArtifactHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
+      className
+    ),
+    ...props
+  }
+);
+const ArtifactClose = ({
+  className,
+  children,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Button,
+  {
+    className: cn(
+      "size-8 p-0 text-muted-foreground hover:text-foreground",
+      className
+    ),
+    size,
+    type: "button",
+    variant,
+    ...props,
+    children: [
+      children ?? /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+);
+const ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("font-medium text-foreground text-sm", className),
+    ...props
+  }
+);
+const ArtifactDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-sm", className), ...props });
+const ArtifactActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props });
+const ArtifactAction = ({
+  tooltip,
+  label,
+  icon: Icon,
+  children,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn(
+        "size-8 p-0 text-muted-foreground hover:text-foreground",
+        className
+      ),
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4" }) : children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+const ArtifactContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto p-4", className), ...props });
+export {
+  Artifact,
+  ArtifactAction,
+  ArtifactActions,
+  ArtifactClose,
+  ArtifactContent,
+  ArtifactDescription,
+  ArtifactHeader,
+  ArtifactTitle
+};