@sero-ai/ui 0.2.1 → 0.3.1

package/dist/components/ai-elements/audio-player.cjs

@@ -0,0 +1,174 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+
+
+
+var _buttongroup = require('../ui/button-group');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+
+
+
+
+
+
+var _react = require('media-chrome/react');
+const AudioPlayer = ({
+  children,
+  style,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaController,
+  {
+    audio: true,
+    "data-slot": "audio-player",
+    style: {
+      "--media-background-color": "transparent",
+      "--media-button-icon-height": "1rem",
+      "--media-button-icon-width": "1rem",
+      "--media-control-background": "transparent",
+      "--media-control-hover-background": "var(--color-accent)",
+      "--media-control-padding": "0",
+      "--media-font": "var(--font-sans)",
+      "--media-font-size": "10px",
+      "--media-icon-color": "currentColor",
+      "--media-preview-time-background": "var(--color-background)",
+      "--media-preview-time-border-radius": "var(--radius-md)",
+      "--media-preview-time-text-shadow": "none",
+      "--media-primary-color": "var(--color-primary)",
+      "--media-range-bar-color": "var(--color-primary)",
+      "--media-range-track-background": "var(--color-secondary)",
+      "--media-secondary-color": "var(--color-secondary)",
+      "--media-text-color": "var(--color-foreground)",
+      "--media-tooltip-arrow-display": "none",
+      "--media-tooltip-background": "var(--color-background)",
+      "--media-tooltip-border-radius": "var(--radius-md)",
+      ...style
+    },
+    ...props,
+    children
+  }
+);
+const AudioPlayerElement = ({ ...props }) => (
+  // oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) -- audio player captions are provided by consumer
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "audio",
+    {
+      "aria-label": "Audio preview",
+      "data-slot": "audio-player-element",
+      slot: "media",
+      src: "src" in props ? props.src : `data:${props.data.mediaType};base64,${props.data.base64}`,
+      ...props
+    }
+  )
+);
+const AudioPlayerControlBar = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.MediaControlBar, { "data-slot": "audio-player-control-bar", ...props, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _buttongroup.ButtonGroup, { orientation: "horizontal", children }) });
+const AudioPlayerPlayButton = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaPlayButton,
+  {
+    className: _utils.cn.call(void 0, "bg-transparent", className),
+    "data-slot": "audio-player-play-button",
+    ...props
+  }
+) });
+const AudioPlayerSeekBackwardButton = ({
+  seekOffset = 10,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaSeekBackwardButton,
+  {
+    "data-slot": "audio-player-seek-backward-button",
+    seekOffset,
+    ...props
+  }
+) });
+const AudioPlayerSeekForwardButton = ({
+  seekOffset = 10,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaSeekForwardButton,
+  {
+    "data-slot": "audio-player-seek-forward-button",
+    seekOffset,
+    ...props
+  }
+) });
+const AudioPlayerTimeDisplay = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _buttongroup.ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaTimeDisplay,
+  {
+    className: _utils.cn.call(void 0, "tabular-nums", className),
+    "data-slot": "audio-player-time-display",
+    ...props
+  }
+) });
+const AudioPlayerTimeRange = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _buttongroup.ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaTimeRange,
+  {
+    className: _utils.cn.call(void 0, "", className),
+    "data-slot": "audio-player-time-range",
+    ...props
+  }
+) });
+const AudioPlayerDurationDisplay = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _buttongroup.ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaDurationDisplay,
+  {
+    className: _utils.cn.call(void 0, "tabular-nums", className),
+    "data-slot": "audio-player-duration-display",
+    ...props
+  }
+) });
+const AudioPlayerMuteButton = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _buttongroup.ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaMuteButton,
+  {
+    className: _utils.cn.call(void 0, "", className),
+    "data-slot": "audio-player-mute-button",
+    ...props
+  }
+) });
+const AudioPlayerVolumeRange = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _buttongroup.ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.MediaVolumeRange,
+  {
+    className: _utils.cn.call(void 0, "", className),
+    "data-slot": "audio-player-volume-range",
+    ...props
+  }
+) });
+
+
+
+
+
+
+
+
+
+
+
+
+exports.AudioPlayer = AudioPlayer; exports.AudioPlayerControlBar = AudioPlayerControlBar; exports.AudioPlayerDurationDisplay = AudioPlayerDurationDisplay; exports.AudioPlayerElement = AudioPlayerElement; exports.AudioPlayerMuteButton = AudioPlayerMuteButton; exports.AudioPlayerPlayButton = AudioPlayerPlayButton; exports.AudioPlayerSeekBackwardButton = AudioPlayerSeekBackwardButton; exports.AudioPlayerSeekForwardButton = AudioPlayerSeekForwardButton; exports.AudioPlayerTimeDisplay = AudioPlayerTimeDisplay; exports.AudioPlayerTimeRange = AudioPlayerTimeRange; exports.AudioPlayerVolumeRange = AudioPlayerVolumeRange;

package/dist/components/ai-elements/audio-player.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Experimental_SpeechResult } from 'ai';
+import { ComponentProps } from 'react';
+import { MediaController, MediaControlBar, MediaDurationDisplay, MediaMuteButton, MediaPlayButton, MediaSeekBackwardButton, MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaVolumeRange } from 'media-chrome/react';
+
+type AudioPlayerProps = Omit<ComponentProps<typeof MediaController>, "audio">;
+declare const AudioPlayer: ({ children, style, ...props }: AudioPlayerProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerElementProps = Omit<ComponentProps<"audio">, "src"> & ({
+    data: Experimental_SpeechResult["audio"];
+} | {
+    src: string;
+});
+declare const AudioPlayerElement: ({ ...props }: AudioPlayerElementProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;
+declare const AudioPlayerControlBar: ({ children, ...props }: AudioPlayerControlBarProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;
+declare const AudioPlayerPlayButton: ({ className, ...props }: AudioPlayerPlayButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerSeekBackwardButtonProps = ComponentProps<typeof MediaSeekBackwardButton>;
+declare const AudioPlayerSeekBackwardButton: ({ seekOffset, ...props }: AudioPlayerSeekBackwardButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerSeekForwardButtonProps = ComponentProps<typeof MediaSeekForwardButton>;
+declare const AudioPlayerSeekForwardButton: ({ seekOffset, ...props }: AudioPlayerSeekForwardButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerTimeDisplayProps = ComponentProps<typeof MediaTimeDisplay>;
+declare const AudioPlayerTimeDisplay: ({ className, ...props }: AudioPlayerTimeDisplayProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;
+declare const AudioPlayerTimeRange: ({ className, ...props }: AudioPlayerTimeRangeProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerDurationDisplayProps = ComponentProps<typeof MediaDurationDisplay>;
+declare const AudioPlayerDurationDisplay: ({ className, ...props }: AudioPlayerDurationDisplayProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;
+declare const AudioPlayerMuteButton: ({ className, ...props }: AudioPlayerMuteButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerVolumeRangeProps = ComponentProps<typeof MediaVolumeRange>;
+declare const AudioPlayerVolumeRange: ({ className, ...props }: AudioPlayerVolumeRangeProps) => react_jsx_runtime.JSX.Element;
+
+export { AudioPlayer, AudioPlayerControlBar, type AudioPlayerControlBarProps, AudioPlayerDurationDisplay, type AudioPlayerDurationDisplayProps, AudioPlayerElement, type AudioPlayerElementProps, AudioPlayerMuteButton, type AudioPlayerMuteButtonProps, AudioPlayerPlayButton, type AudioPlayerPlayButtonProps, type AudioPlayerProps, AudioPlayerSeekBackwardButton, type AudioPlayerSeekBackwardButtonProps, AudioPlayerSeekForwardButton, type AudioPlayerSeekForwardButtonProps, AudioPlayerTimeDisplay, type AudioPlayerTimeDisplayProps, AudioPlayerTimeRange, type AudioPlayerTimeRangeProps, AudioPlayerVolumeRange, type AudioPlayerVolumeRangeProps };

package/dist/components/ai-elements/audio-player.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Experimental_SpeechResult } from 'ai';
+import { ComponentProps } from 'react';
+import { MediaController, MediaControlBar, MediaDurationDisplay, MediaMuteButton, MediaPlayButton, MediaSeekBackwardButton, MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaVolumeRange } from 'media-chrome/react';
+
+type AudioPlayerProps = Omit<ComponentProps<typeof MediaController>, "audio">;
+declare const AudioPlayer: ({ children, style, ...props }: AudioPlayerProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerElementProps = Omit<ComponentProps<"audio">, "src"> & ({
+    data: Experimental_SpeechResult["audio"];
+} | {
+    src: string;
+});
+declare const AudioPlayerElement: ({ ...props }: AudioPlayerElementProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;
+declare const AudioPlayerControlBar: ({ children, ...props }: AudioPlayerControlBarProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;
+declare const AudioPlayerPlayButton: ({ className, ...props }: AudioPlayerPlayButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerSeekBackwardButtonProps = ComponentProps<typeof MediaSeekBackwardButton>;
+declare const AudioPlayerSeekBackwardButton: ({ seekOffset, ...props }: AudioPlayerSeekBackwardButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerSeekForwardButtonProps = ComponentProps<typeof MediaSeekForwardButton>;
+declare const AudioPlayerSeekForwardButton: ({ seekOffset, ...props }: AudioPlayerSeekForwardButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerTimeDisplayProps = ComponentProps<typeof MediaTimeDisplay>;
+declare const AudioPlayerTimeDisplay: ({ className, ...props }: AudioPlayerTimeDisplayProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;
+declare const AudioPlayerTimeRange: ({ className, ...props }: AudioPlayerTimeRangeProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerDurationDisplayProps = ComponentProps<typeof MediaDurationDisplay>;
+declare const AudioPlayerDurationDisplay: ({ className, ...props }: AudioPlayerDurationDisplayProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;
+declare const AudioPlayerMuteButton: ({ className, ...props }: AudioPlayerMuteButtonProps) => react_jsx_runtime.JSX.Element;
+type AudioPlayerVolumeRangeProps = ComponentProps<typeof MediaVolumeRange>;
+declare const AudioPlayerVolumeRange: ({ className, ...props }: AudioPlayerVolumeRangeProps) => react_jsx_runtime.JSX.Element;
+
+export { AudioPlayer, AudioPlayerControlBar, type AudioPlayerControlBarProps, AudioPlayerDurationDisplay, type AudioPlayerDurationDisplayProps, AudioPlayerElement, type AudioPlayerElementProps, AudioPlayerMuteButton, type AudioPlayerMuteButtonProps, AudioPlayerPlayButton, type AudioPlayerPlayButtonProps, type AudioPlayerProps, AudioPlayerSeekBackwardButton, type AudioPlayerSeekBackwardButtonProps, AudioPlayerSeekForwardButton, type AudioPlayerSeekForwardButtonProps, AudioPlayerTimeDisplay, type AudioPlayerTimeDisplayProps, AudioPlayerTimeRange, type AudioPlayerTimeRangeProps, AudioPlayerVolumeRange, type AudioPlayerVolumeRangeProps };

package/dist/components/ai-elements/audio-player.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  ButtonGroup,
+  ButtonGroupText
+} from "../ui/button-group";
+import { cn } from "../../lib/utils";
+import {
+  MediaControlBar,
+  MediaController,
+  MediaDurationDisplay,
+  MediaMuteButton,
+  MediaPlayButton,
+  MediaSeekBackwardButton,
+  MediaSeekForwardButton,
+  MediaTimeDisplay,
+  MediaTimeRange,
+  MediaVolumeRange
+} from "media-chrome/react";
+const AudioPlayer = ({
+  children,
+  style,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  MediaController,
+  {
+    audio: true,
+    "data-slot": "audio-player",
+    style: {
+      "--media-background-color": "transparent",
+      "--media-button-icon-height": "1rem",
+      "--media-button-icon-width": "1rem",
+      "--media-control-background": "transparent",
+      "--media-control-hover-background": "var(--color-accent)",
+      "--media-control-padding": "0",
+      "--media-font": "var(--font-sans)",
+      "--media-font-size": "10px",
+      "--media-icon-color": "currentColor",
+      "--media-preview-time-background": "var(--color-background)",
+      "--media-preview-time-border-radius": "var(--radius-md)",
+      "--media-preview-time-text-shadow": "none",
+      "--media-primary-color": "var(--color-primary)",
+      "--media-range-bar-color": "var(--color-primary)",
+      "--media-range-track-background": "var(--color-secondary)",
+      "--media-secondary-color": "var(--color-secondary)",
+      "--media-text-color": "var(--color-foreground)",
+      "--media-tooltip-arrow-display": "none",
+      "--media-tooltip-background": "var(--color-background)",
+      "--media-tooltip-border-radius": "var(--radius-md)",
+      ...style
+    },
+    ...props,
+    children
+  }
+);
+const AudioPlayerElement = ({ ...props }) => (
+  // oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) -- audio player captions are provided by consumer
+  /* @__PURE__ */ jsx(
+    "audio",
+    {
+      "aria-label": "Audio preview",
+      "data-slot": "audio-player-element",
+      slot: "media",
+      src: "src" in props ? props.src : `data:${props.data.mediaType};base64,${props.data.base64}`,
+      ...props
+    }
+  )
+);
+const AudioPlayerControlBar = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(MediaControlBar, { "data-slot": "audio-player-control-bar", ...props, children: /* @__PURE__ */ jsx(ButtonGroup, { orientation: "horizontal", children }) });
+const AudioPlayerPlayButton = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ jsx(
+  MediaPlayButton,
+  {
+    className: cn("bg-transparent", className),
+    "data-slot": "audio-player-play-button",
+    ...props
+  }
+) });
+const AudioPlayerSeekBackwardButton = ({
+  seekOffset = 10,
+  ...props
+}) => /* @__PURE__ */ jsx(Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ jsx(
+  MediaSeekBackwardButton,
+  {
+    "data-slot": "audio-player-seek-backward-button",
+    seekOffset,
+    ...props
+  }
+) });
+const AudioPlayerSeekForwardButton = ({
+  seekOffset = 10,
+  ...props
+}) => /* @__PURE__ */ jsx(Button, { asChild: true, size: "icon-sm", variant: "outline", children: /* @__PURE__ */ jsx(
+  MediaSeekForwardButton,
+  {
+    "data-slot": "audio-player-seek-forward-button",
+    seekOffset,
+    ...props
+  }
+) });
+const AudioPlayerTimeDisplay = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(
+  MediaTimeDisplay,
+  {
+    className: cn("tabular-nums", className),
+    "data-slot": "audio-player-time-display",
+    ...props
+  }
+) });
+const AudioPlayerTimeRange = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(
+  MediaTimeRange,
+  {
+    className: cn("", className),
+    "data-slot": "audio-player-time-range",
+    ...props
+  }
+) });
+const AudioPlayerDurationDisplay = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(
+  MediaDurationDisplay,
+  {
+    className: cn("tabular-nums", className),
+    "data-slot": "audio-player-duration-display",
+    ...props
+  }
+) });
+const AudioPlayerMuteButton = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(
+  MediaMuteButton,
+  {
+    className: cn("", className),
+    "data-slot": "audio-player-mute-button",
+    ...props
+  }
+) });
+const AudioPlayerVolumeRange = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, className: "bg-transparent", children: /* @__PURE__ */ jsx(
+  MediaVolumeRange,
+  {
+    className: cn("", className),
+    "data-slot": "audio-player-volume-range",
+    ...props
+  }
+) });
+export {
+  AudioPlayer,
+  AudioPlayerControlBar,
+  AudioPlayerDurationDisplay,
+  AudioPlayerElement,
+  AudioPlayerMuteButton,
+  AudioPlayerPlayButton,
+  AudioPlayerSeekBackwardButton,
+  AudioPlayerSeekForwardButton,
+  AudioPlayerTimeDisplay,
+  AudioPlayerTimeRange,
+  AudioPlayerVolumeRange
+};

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

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _react = require('@xyflow/react');
+require('@xyflow/react/dist/style.css');
+const deleteKeyCode = ["Backspace", "Delete"];
+const Canvas = ({ children, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _react.ReactFlow,
+  {
+    deleteKeyCode,
+    fitView: true,
+    panOnDrag: false,
+    panOnScroll: true,
+    selectionOnDrag: true,
+    zoomOnDoubleClick: false,
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Background, { bgColor: "var(--sidebar)" }),
+      children
+    ]
+  }
+);
+
+
+exports.Canvas = Canvas;

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactFlowProps } from '@xyflow/react';
+import { ReactNode } from 'react';
+
+type CanvasProps = ReactFlowProps & {
+    children?: ReactNode;
+};
+declare const Canvas: ({ children, ...props }: CanvasProps) => react_jsx_runtime.JSX.Element;
+
+export { Canvas };

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactFlowProps } from '@xyflow/react';
+import { ReactNode } from 'react';
+
+type CanvasProps = ReactFlowProps & {
+    children?: ReactNode;
+};
+declare const Canvas: ({ children, ...props }: CanvasProps) => react_jsx_runtime.JSX.Element;
+
+export { Canvas };

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Background, ReactFlow } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+const deleteKeyCode = ["Backspace", "Delete"];
+const Canvas = ({ children, ...props }) => /* @__PURE__ */ jsxs(
+  ReactFlow,
+  {
+    deleteKeyCode,
+    fitView: true,
+    panOnDrag: false,
+    panOnScroll: true,
+    selectionOnDrag: true,
+    zoomOnDoubleClick: false,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Background, { bgColor: "var(--sidebar)" }),
+      children
+    ]
+  }
+);
+export {
+  Canvas
+};

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

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