@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/chain-of-thought.d.cts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { Badge } from '../ui/badge.cjs';
+import { CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type ChainOfThoughtProps = ComponentProps<"div"> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const ChainOfThought: React.MemoExoticComponent<({ className, open, defaultOpen, onOpenChange, children, ...props }: ChainOfThoughtProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const ChainOfThoughtHeader: React.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtHeaderProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+    icon?: LucideIcon;
+    label: ReactNode;
+    description?: ReactNode;
+    status?: "complete" | "active" | "pending";
+};
+declare const ChainOfThoughtStep: React.MemoExoticComponent<({ className, icon: Icon, label, description, status, children, ...props }: ChainOfThoughtStepProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+declare const ChainOfThoughtSearchResults: React.MemoExoticComponent<({ className, ...props }: ChainOfThoughtSearchResultsProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+declare const ChainOfThoughtSearchResult: React.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtSearchResultProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ChainOfThoughtContent: React.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+    caption?: string;
+};
+declare const ChainOfThoughtImage: React.MemoExoticComponent<({ className, children, caption, ...props }: ChainOfThoughtImageProps) => react_jsx_runtime.JSX.Element>;
+
+export { ChainOfThought, ChainOfThoughtContent, type ChainOfThoughtContentProps, ChainOfThoughtHeader, type ChainOfThoughtHeaderProps, ChainOfThoughtImage, type ChainOfThoughtImageProps, type ChainOfThoughtProps, ChainOfThoughtSearchResult, type ChainOfThoughtSearchResultProps, ChainOfThoughtSearchResults, type ChainOfThoughtSearchResultsProps, ChainOfThoughtStep, type ChainOfThoughtStepProps };

package/dist/components/ai-elements/chain-of-thought.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { Badge } from '../ui/badge.js';
+import { CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type ChainOfThoughtProps = ComponentProps<"div"> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const ChainOfThought: React.MemoExoticComponent<({ className, open, defaultOpen, onOpenChange, children, ...props }: ChainOfThoughtProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const ChainOfThoughtHeader: React.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtHeaderProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+    icon?: LucideIcon;
+    label: ReactNode;
+    description?: ReactNode;
+    status?: "complete" | "active" | "pending";
+};
+declare const ChainOfThoughtStep: React.MemoExoticComponent<({ className, icon: Icon, label, description, status, children, ...props }: ChainOfThoughtStepProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+declare const ChainOfThoughtSearchResults: React.MemoExoticComponent<({ className, ...props }: ChainOfThoughtSearchResultsProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+declare const ChainOfThoughtSearchResult: React.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtSearchResultProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ChainOfThoughtContent: React.MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => react_jsx_runtime.JSX.Element>;
+type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+    caption?: string;
+};
+declare const ChainOfThoughtImage: React.MemoExoticComponent<({ className, children, caption, ...props }: ChainOfThoughtImageProps) => react_jsx_runtime.JSX.Element>;
+
+export { ChainOfThought, ChainOfThoughtContent, type ChainOfThoughtContentProps, ChainOfThoughtHeader, type ChainOfThoughtHeaderProps, ChainOfThoughtImage, type ChainOfThoughtImageProps, type ChainOfThoughtProps, ChainOfThoughtSearchResult, type ChainOfThoughtSearchResultProps, ChainOfThoughtSearchResults, type ChainOfThoughtSearchResultsProps, ChainOfThoughtStep, type ChainOfThoughtStepProps };

package/dist/components/ai-elements/chain-of-thought.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Badge } from "../ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
+import { createContext, memo, use, useMemo } from "react";
+const ChainOfThoughtContext = createContext(
+  null
+);
+const useChainOfThought = () => {
+  const context = use(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought"
+    );
+  }
+  return context;
+};
+const ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    );
+    return /* @__PURE__ */ jsx(ChainOfThoughtContext.Provider, { value: chainOfThoughtContext, children: /* @__PURE__ */ jsx("div", { className: cn("not-prose w-full space-y-4", className), ...props, children }) });
+  }
+);
+const ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: setIsOpen, open: isOpen, children: /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: children ?? "Chain of Thought" }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+const stepStatusStyles = {
+  active: "text-foreground",
+  complete: "text-muted-foreground",
+  pending: "text-muted-foreground/50"
+};
+const ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = "complete",
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex gap-2 text-sm",
+        stepStatusStyles[status],
+        "fade-in-0 slide-in-from-top-2 animate-in",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-border" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { children: label }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: description }),
+          children
+        ] })
+      ]
+    }
+  )
+);
+const ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ...props
+    }
+  )
+);
+const ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: cn("gap-1 px-2 py-0.5 font-normal text-xs", className),
+      variant: "secondary",
+      ...props,
+      children
+    }
+  )
+);
+const ChainOfThoughtContent = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { open: isOpen, children: /* @__PURE__ */ jsx(
+      CollapsibleContent,
+      {
+        className: cn(
+          "mt-2 space-y-3",
+          "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+const ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("mt-2 space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children }),
+    caption && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: caption })
+  ] })
+);
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
+export {
+  ChainOfThought,
+  ChainOfThoughtContent,
+  ChainOfThoughtHeader,
+  ChainOfThoughtImage,
+  ChainOfThoughtSearchResult,
+  ChainOfThoughtSearchResults,
+  ChainOfThoughtStep
+};

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

@@ -0,0 +1,49 @@
+"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 _separator = require('../ui/separator');
+
+
+
+
+var _tooltip = require('../ui/tooltip');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+const Checkpoint = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center gap-0.5 overflow-hidden text-muted-foreground",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _separator.Separator, {})
+    ]
+  }
+);
+const CheckpointIcon = ({
+  className,
+  children,
+  ...props
+}) => _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.BookmarkIcon, { className: _utils.cn.call(void 0, "size-4 shrink-0", className), ...props })));
+const CheckpointTrigger = ({
+  children,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}) => tooltip ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _tooltip.Tooltip, { children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { size, type: "button", variant, ...props, children }) }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tooltip.TooltipContent, { align: "start", side: "bottom", children: tooltip })
+] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { size, type: "button", variant, ...props, children });
+
+
+
+
+exports.Checkpoint = Checkpoint; exports.CheckpointIcon = CheckpointIcon; exports.CheckpointTrigger = CheckpointTrigger;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideProps } from 'lucide-react';
+import { Button } from '../ui/button.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+declare const Checkpoint: ({ className, children, ...props }: CheckpointProps) => react_jsx_runtime.JSX.Element;
+type CheckpointIconProps = LucideProps;
+declare const CheckpointIcon: ({ className, children, ...props }: CheckpointIconProps) => string | number | bigint | boolean | 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;
+type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+};
+declare const CheckpointTrigger: ({ children, variant, size, tooltip, ...props }: CheckpointTriggerProps) => react_jsx_runtime.JSX.Element;
+
+export { Checkpoint, CheckpointIcon, type CheckpointIconProps, type CheckpointProps, CheckpointTrigger, type CheckpointTriggerProps };

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideProps } from 'lucide-react';
+import { Button } from '../ui/button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+declare const Checkpoint: ({ className, children, ...props }: CheckpointProps) => react_jsx_runtime.JSX.Element;
+type CheckpointIconProps = LucideProps;
+declare const CheckpointIcon: ({ className, children, ...props }: CheckpointIconProps) => string | number | bigint | boolean | 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;
+type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+};
+declare const CheckpointTrigger: ({ children, variant, size, tooltip, ...props }: CheckpointTriggerProps) => react_jsx_runtime.JSX.Element;
+
+export { Checkpoint, CheckpointIcon, type CheckpointIconProps, type CheckpointProps, CheckpointTrigger, type CheckpointTriggerProps };

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

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "../ui/tooltip";
+import { cn } from "../../lib/utils";
+import { BookmarkIcon } from "lucide-react";
+const Checkpoint = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-0.5 overflow-hidden text-muted-foreground",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(Separator, {})
+    ]
+  }
+);
+const CheckpointIcon = ({
+  className,
+  children,
+  ...props
+}) => children ?? /* @__PURE__ */ jsx(BookmarkIcon, { className: cn("size-4 shrink-0", className), ...props });
+const CheckpointTrigger = ({
+  children,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}) => tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size, type: "button", variant, ...props, children }) }),
+  /* @__PURE__ */ jsx(TooltipContent, { align: "start", side: "bottom", children: tooltip })
+] }) : /* @__PURE__ */ jsx(Button, { size, type: "button", variant, ...props, children });
+export {
+  Checkpoint,
+  CheckpointIcon,
+  CheckpointTrigger
+};