@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/model-selector.cjs

@@ -0,0 +1,100 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+
+
+
+
+
+
+var _command = require('../ui/command');
+
+
+
+
+
+var _dialog = require('../ui/dialog');
+var _utils = require('../../lib/utils');
+const ModelSelector = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.Dialog, { ...props });
+const ModelSelectorTrigger = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.DialogTrigger, { ...props });
+const ModelSelectorContent = ({
+  className,
+  children,
+  title = "Model Selector",
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _dialog.DialogContent,
+  {
+    "aria-describedby": void 0,
+    className: _utils.cn.call(void 0, 
+      "outline! border-none! p-0 outline-border! outline-solid!",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.DialogTitle, { className: "sr-only", children: title }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children })
+    ]
+  }
+);
+const ModelSelectorDialog = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandDialog, { ...props });
+const ModelSelectorInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandInput, { className: _utils.cn.call(void 0, "h-auto py-3.5", className), ...props });
+const ModelSelectorList = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandList, { ...props });
+const ModelSelectorEmpty = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandEmpty, { ...props });
+const ModelSelectorGroup = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandGroup, { ...props });
+const ModelSelectorItem = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandItem, { ...props });
+const ModelSelectorShortcut = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandShortcut, { ...props });
+const ModelSelectorSeparator = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandSeparator, { ...props });
+const ModelSelectorLogo = ({
+  provider,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "img",
+  {
+    ...props,
+    alt: `${provider} logo`,
+    className: _utils.cn.call(void 0, "size-3 dark:invert", className),
+    height: 12,
+    src: `https://models.dev/logos/${provider}.svg`,
+    width: 12
+  }
+);
+const ModelSelectorLogoGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
+      className
+    ),
+    ...props
+  }
+);
+const ModelSelectorName = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "flex-1 truncate text-left", className), ...props });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.ModelSelector = ModelSelector; exports.ModelSelectorContent = ModelSelectorContent; exports.ModelSelectorDialog = ModelSelectorDialog; exports.ModelSelectorEmpty = ModelSelectorEmpty; exports.ModelSelectorGroup = ModelSelectorGroup; exports.ModelSelectorInput = ModelSelectorInput; exports.ModelSelectorItem = ModelSelectorItem; exports.ModelSelectorList = ModelSelectorList; exports.ModelSelectorLogo = ModelSelectorLogo; exports.ModelSelectorLogoGroup = ModelSelectorLogoGroup; exports.ModelSelectorName = ModelSelectorName; exports.ModelSelectorSeparator = ModelSelectorSeparator; exports.ModelSelectorShortcut = ModelSelectorShortcut; exports.ModelSelectorTrigger = ModelSelectorTrigger;

package/dist/components/ai-elements/model-selector.d.cts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '../ui/command.cjs';
+import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog.cjs';
+import 'cmdk';
+import 'radix-ui';
+
+type ModelSelectorProps = ComponentProps<typeof Dialog>;
+declare const ModelSelector: (props: ModelSelectorProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+declare const ModelSelectorTrigger: (props: ModelSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+    title?: ReactNode;
+};
+declare const ModelSelectorContent: ({ className, children, title, ...props }: ModelSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+declare const ModelSelectorDialog: (props: ModelSelectorDialogProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+declare const ModelSelectorInput: ({ className, ...props }: ModelSelectorInputProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+declare const ModelSelectorList: (props: ModelSelectorListProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+declare const ModelSelectorEmpty: (props: ModelSelectorEmptyProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+declare const ModelSelectorGroup: (props: ModelSelectorGroupProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+declare const ModelSelectorItem: (props: ModelSelectorItemProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+declare const ModelSelectorShortcut: (props: ModelSelectorShortcutProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
+declare const ModelSelectorSeparator: (props: ModelSelectorSeparatorProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorLogoProps = Omit<ComponentProps<"img">, "src" | "alt"> & {
+    provider: "moonshotai-cn" | "lucidquery" | "moonshotai" | "zai-coding-plan" | "alibaba" | "xai" | "vultr" | "nvidia" | "upstage" | "groq" | "github-copilot" | "mistral" | "vercel" | "nebius" | "deepseek" | "alibaba-cn" | "google-vertex-anthropic" | "venice" | "chutes" | "cortecs" | "github-models" | "togetherai" | "azure" | "baseten" | "huggingface" | "opencode" | "fastrouter" | "google" | "google-vertex" | "cloudflare-workers-ai" | "inception" | "wandb" | "openai" | "zhipuai-coding-plan" | "perplexity" | "openrouter" | "zenmux" | "v0" | "iflowcn" | "synthetic" | "deepinfra" | "zhipuai" | "submodel" | "zai" | "inference" | "requesty" | "morph" | "lmstudio" | "anthropic" | "aihubmix" | "fireworks-ai" | "modelscope" | "llama" | "scaleway" | "amazon-bedrock" | "cerebras" | (string & {});
+};
+declare const ModelSelectorLogo: ({ provider, className, ...props }: ModelSelectorLogoProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+declare const ModelSelectorLogoGroup: ({ className, ...props }: ModelSelectorLogoGroupProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorNameProps = ComponentProps<"span">;
+declare const ModelSelectorName: ({ className, ...props }: ModelSelectorNameProps) => react_jsx_runtime.JSX.Element;
+
+export { ModelSelector, ModelSelectorContent, type ModelSelectorContentProps, ModelSelectorDialog, type ModelSelectorDialogProps, ModelSelectorEmpty, type ModelSelectorEmptyProps, ModelSelectorGroup, type ModelSelectorGroupProps, ModelSelectorInput, type ModelSelectorInputProps, ModelSelectorItem, type ModelSelectorItemProps, ModelSelectorList, type ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, type ModelSelectorLogoGroupProps, type ModelSelectorLogoProps, ModelSelectorName, type ModelSelectorNameProps, type ModelSelectorProps, ModelSelectorSeparator, type ModelSelectorSeparatorProps, ModelSelectorShortcut, type ModelSelectorShortcutProps, ModelSelectorTrigger, type ModelSelectorTriggerProps };

package/dist/components/ai-elements/model-selector.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '../ui/command.js';
+import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog.js';
+import 'cmdk';
+import 'radix-ui';
+
+type ModelSelectorProps = ComponentProps<typeof Dialog>;
+declare const ModelSelector: (props: ModelSelectorProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+declare const ModelSelectorTrigger: (props: ModelSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+    title?: ReactNode;
+};
+declare const ModelSelectorContent: ({ className, children, title, ...props }: ModelSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+declare const ModelSelectorDialog: (props: ModelSelectorDialogProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+declare const ModelSelectorInput: ({ className, ...props }: ModelSelectorInputProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+declare const ModelSelectorList: (props: ModelSelectorListProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+declare const ModelSelectorEmpty: (props: ModelSelectorEmptyProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+declare const ModelSelectorGroup: (props: ModelSelectorGroupProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+declare const ModelSelectorItem: (props: ModelSelectorItemProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+declare const ModelSelectorShortcut: (props: ModelSelectorShortcutProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
+declare const ModelSelectorSeparator: (props: ModelSelectorSeparatorProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorLogoProps = Omit<ComponentProps<"img">, "src" | "alt"> & {
+    provider: "moonshotai-cn" | "lucidquery" | "moonshotai" | "zai-coding-plan" | "alibaba" | "xai" | "vultr" | "nvidia" | "upstage" | "groq" | "github-copilot" | "mistral" | "vercel" | "nebius" | "deepseek" | "alibaba-cn" | "google-vertex-anthropic" | "venice" | "chutes" | "cortecs" | "github-models" | "togetherai" | "azure" | "baseten" | "huggingface" | "opencode" | "fastrouter" | "google" | "google-vertex" | "cloudflare-workers-ai" | "inception" | "wandb" | "openai" | "zhipuai-coding-plan" | "perplexity" | "openrouter" | "zenmux" | "v0" | "iflowcn" | "synthetic" | "deepinfra" | "zhipuai" | "submodel" | "zai" | "inference" | "requesty" | "morph" | "lmstudio" | "anthropic" | "aihubmix" | "fireworks-ai" | "modelscope" | "llama" | "scaleway" | "amazon-bedrock" | "cerebras" | (string & {});
+};
+declare const ModelSelectorLogo: ({ provider, className, ...props }: ModelSelectorLogoProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+declare const ModelSelectorLogoGroup: ({ className, ...props }: ModelSelectorLogoGroupProps) => react_jsx_runtime.JSX.Element;
+type ModelSelectorNameProps = ComponentProps<"span">;
+declare const ModelSelectorName: ({ className, ...props }: ModelSelectorNameProps) => react_jsx_runtime.JSX.Element;
+
+export { ModelSelector, ModelSelectorContent, type ModelSelectorContentProps, ModelSelectorDialog, type ModelSelectorDialogProps, ModelSelectorEmpty, type ModelSelectorEmptyProps, ModelSelectorGroup, type ModelSelectorGroupProps, ModelSelectorInput, type ModelSelectorInputProps, ModelSelectorItem, type ModelSelectorItemProps, ModelSelectorList, type ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, type ModelSelectorLogoGroupProps, type ModelSelectorLogoProps, ModelSelectorName, type ModelSelectorNameProps, type ModelSelectorProps, ModelSelectorSeparator, type ModelSelectorSeparatorProps, ModelSelectorShortcut, type ModelSelectorShortcutProps, ModelSelectorTrigger, type ModelSelectorTriggerProps };

package/dist/components/ai-elements/model-selector.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+} from "../ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger
+} from "../ui/dialog";
+import { cn } from "../../lib/utils";
+const ModelSelector = (props) => /* @__PURE__ */ jsx(Dialog, { ...props });
+const ModelSelectorTrigger = (props) => /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+const ModelSelectorContent = ({
+  className,
+  children,
+  title = "Model Selector",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  DialogContent,
+  {
+    "aria-describedby": void 0,
+    className: cn(
+      "outline! border-none! p-0 outline-border! outline-solid!",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+      /* @__PURE__ */ jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children })
+    ]
+  }
+);
+const ModelSelectorDialog = (props) => /* @__PURE__ */ jsx(CommandDialog, { ...props });
+const ModelSelectorInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandInput, { className: cn("h-auto py-3.5", className), ...props });
+const ModelSelectorList = (props) => /* @__PURE__ */ jsx(CommandList, { ...props });
+const ModelSelectorEmpty = (props) => /* @__PURE__ */ jsx(CommandEmpty, { ...props });
+const ModelSelectorGroup = (props) => /* @__PURE__ */ jsx(CommandGroup, { ...props });
+const ModelSelectorItem = (props) => /* @__PURE__ */ jsx(CommandItem, { ...props });
+const ModelSelectorShortcut = (props) => /* @__PURE__ */ jsx(CommandShortcut, { ...props });
+const ModelSelectorSeparator = (props) => /* @__PURE__ */ jsx(CommandSeparator, { ...props });
+const ModelSelectorLogo = ({
+  provider,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    ...props,
+    alt: `${provider} logo`,
+    className: cn("size-3 dark:invert", className),
+    height: 12,
+    src: `https://models.dev/logos/${provider}.svg`,
+    width: 12
+  }
+);
+const ModelSelectorLogoGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
+      className
+    ),
+    ...props
+  }
+);
+const ModelSelectorName = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-left", className), ...props });
+export {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorDialog,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorSeparator,
+  ModelSelectorShortcut,
+  ModelSelectorTrigger
+};

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

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+
+
+
+
+var _card = require('../ui/card');
+var _utils = require('../../lib/utils');
+var _react = require('@xyflow/react');
+const Node = ({ handles, className, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _card.Card,
+  {
+    className: _utils.cn.call(void 0, 
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      className
+    ),
+    ...props,
+    children: [
+      handles.target && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Handle, { position: _react.Position.Left, type: "target" }),
+      handles.source && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Handle, { position: _react.Position.Right, type: "source" }),
+      props.children
+    ]
+  }
+);
+const NodeHeader = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _card.CardHeader,
+  {
+    className: _utils.cn.call(void 0, "gap-0.5 rounded-t-md border-b bg-secondary p-3!", className),
+    ...props
+  }
+);
+const NodeTitle = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardTitle, { ...props });
+const NodeDescription = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardDescription, { ...props });
+const NodeAction = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardAction, { ...props });
+const NodeContent = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardContent, { className: _utils.cn.call(void 0, "p-3", className), ...props });
+const NodeFooter = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _card.CardFooter,
+  {
+    className: _utils.cn.call(void 0, "rounded-b-md border-t bg-secondary p-3!", className),
+    ...props
+  }
+);
+
+
+
+
+
+
+
+
+exports.Node = Node; exports.NodeAction = NodeAction; exports.NodeContent = NodeContent; exports.NodeDescription = NodeDescription; exports.NodeFooter = NodeFooter; exports.NodeHeader = NodeHeader; exports.NodeTitle = NodeTitle;

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card.cjs';
+
+type NodeProps = ComponentProps<typeof Card> & {
+    handles: {
+        target: boolean;
+        source: boolean;
+    };
+};
+declare const Node: ({ handles, className, ...props }: NodeProps) => react_jsx_runtime.JSX.Element;
+type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+declare const NodeHeader: ({ className, ...props }: NodeHeaderProps) => react_jsx_runtime.JSX.Element;
+type NodeTitleProps = ComponentProps<typeof CardTitle>;
+declare const NodeTitle: (props: NodeTitleProps) => react_jsx_runtime.JSX.Element;
+type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+declare const NodeDescription: (props: NodeDescriptionProps) => react_jsx_runtime.JSX.Element;
+type NodeActionProps = ComponentProps<typeof CardAction>;
+declare const NodeAction: (props: NodeActionProps) => react_jsx_runtime.JSX.Element;
+type NodeContentProps = ComponentProps<typeof CardContent>;
+declare const NodeContent: ({ className, ...props }: NodeContentProps) => react_jsx_runtime.JSX.Element;
+type NodeFooterProps = ComponentProps<typeof CardFooter>;
+declare const NodeFooter: ({ className, ...props }: NodeFooterProps) => react_jsx_runtime.JSX.Element;
+
+export { Node, NodeAction, type NodeActionProps, NodeContent, type NodeContentProps, NodeDescription, type NodeDescriptionProps, NodeFooter, type NodeFooterProps, NodeHeader, type NodeHeaderProps, type NodeProps, NodeTitle, type NodeTitleProps };

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card.js';
+
+type NodeProps = ComponentProps<typeof Card> & {
+    handles: {
+        target: boolean;
+        source: boolean;
+    };
+};
+declare const Node: ({ handles, className, ...props }: NodeProps) => react_jsx_runtime.JSX.Element;
+type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+declare const NodeHeader: ({ className, ...props }: NodeHeaderProps) => react_jsx_runtime.JSX.Element;
+type NodeTitleProps = ComponentProps<typeof CardTitle>;
+declare const NodeTitle: (props: NodeTitleProps) => react_jsx_runtime.JSX.Element;
+type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+declare const NodeDescription: (props: NodeDescriptionProps) => react_jsx_runtime.JSX.Element;
+type NodeActionProps = ComponentProps<typeof CardAction>;
+declare const NodeAction: (props: NodeActionProps) => react_jsx_runtime.JSX.Element;
+type NodeContentProps = ComponentProps<typeof CardContent>;
+declare const NodeContent: ({ className, ...props }: NodeContentProps) => react_jsx_runtime.JSX.Element;
+type NodeFooterProps = ComponentProps<typeof CardFooter>;
+declare const NodeFooter: ({ className, ...props }: NodeFooterProps) => react_jsx_runtime.JSX.Element;
+
+export { Node, NodeAction, type NodeActionProps, NodeContent, type NodeContentProps, NodeDescription, type NodeDescriptionProps, NodeFooter, type NodeFooterProps, NodeHeader, type NodeHeaderProps, type NodeProps, NodeTitle, type NodeTitleProps };

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

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../ui/card";
+import { cn } from "../../lib/utils";
+import { Handle, Position } from "@xyflow/react";
+const Node = ({ handles, className, ...props }) => /* @__PURE__ */ jsxs(
+  Card,
+  {
+    className: cn(
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      className
+    ),
+    ...props,
+    children: [
+      handles.target && /* @__PURE__ */ jsx(Handle, { position: Position.Left, type: "target" }),
+      handles.source && /* @__PURE__ */ jsx(Handle, { position: Position.Right, type: "source" }),
+      props.children
+    ]
+  }
+);
+const NodeHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardHeader,
+  {
+    className: cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className),
+    ...props
+  }
+);
+const NodeTitle = (props) => /* @__PURE__ */ jsx(CardTitle, { ...props });
+const NodeDescription = (props) => /* @__PURE__ */ jsx(CardDescription, { ...props });
+const NodeAction = (props) => /* @__PURE__ */ jsx(CardAction, { ...props });
+const NodeContent = ({ className, ...props }) => /* @__PURE__ */ jsx(CardContent, { className: cn("p-3", className), ...props });
+const NodeFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardFooter,
+  {
+    className: cn("rounded-b-md border-t bg-secondary p-3!", className),
+    ...props
+  }
+);
+export {
+  Node,
+  NodeAction,
+  NodeContent,
+  NodeDescription,
+  NodeFooter,
+  NodeHeader,
+  NodeTitle
+};