@chatsdk-dev/elements 0.0.1

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

@@ -0,0 +1,332 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from '@chatsdk-dev/ui/components/command';
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@chatsdk-dev/ui/components/dialog';
+import { Spinner } from '@chatsdk-dev/ui/components/spinner';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { CircleSmallIcon, VenusAndMarsIcon, NonBinaryIcon, MarsStrokeIcon, TransgenderIcon, VenusIcon, MarsIcon, PlayIcon, PauseIcon } from 'lucide-react';
+import { createContext, useContext, useMemo, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var VoiceSelectorContext = createContext(
+  null
+);
+var useVoiceSelector = () => {
+  const context = useContext(VoiceSelectorContext);
+  if (!context) {
+    throw new Error(
+      "VoiceSelector components must be used within VoiceSelector"
+    );
+  }
+  return context;
+};
+var VoiceSelector = ({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}) => {
+  const [value, setValue] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: (open2) => onOpenChange?.(open2, {}),
+    prop: openProp
+  });
+  const voiceSelectorContext = useMemo(
+    () => ({ open, setOpen, setValue, value }),
+    [value, setValue, open, setOpen]
+  );
+  return /* @__PURE__ */ jsx(VoiceSelectorContext.Provider, { value: voiceSelectorContext, children: /* @__PURE__ */ jsx(Dialog, { onOpenChange: setOpen, open, ...props, children }) });
+};
+var VoiceSelectorTrigger = (props) => /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+var VoiceSelectorContent = ({
+  className,
+  children,
+  title = "Voice Selector",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  DialogContent,
+  {
+    "aria-describedby": void 0,
+    className: cn("p-0", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+      /* @__PURE__ */ jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children })
+    ]
+  }
+);
+var VoiceSelectorDialog = (props) => /* @__PURE__ */ jsx(CommandDialog, { ...props });
+var VoiceSelectorInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandInput, { className: cn("h-auto py-3.5", className), ...props });
+var VoiceSelectorList = (props) => /* @__PURE__ */ jsx(CommandList, { ...props });
+var VoiceSelectorEmpty = (props) => /* @__PURE__ */ jsx(CommandEmpty, { ...props });
+var VoiceSelectorGroup = (props) => /* @__PURE__ */ jsx(CommandGroup, { ...props });
+var VoiceSelectorItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandItem, { className: cn("px-4 py-2", className), ...props });
+var VoiceSelectorShortcut = (props) => /* @__PURE__ */ jsx(CommandShortcut, { ...props });
+var VoiceSelectorSeparator = (props) => /* @__PURE__ */ jsx(CommandSeparator, { ...props });
+var VoiceSelectorGender = ({
+  className,
+  value,
+  children,
+  ...props
+}) => {
+  let icon = null;
+  switch (value) {
+    case "male": {
+      icon = /* @__PURE__ */ jsx(MarsIcon, { className: "size-4" });
+      break;
+    }
+    case "female": {
+      icon = /* @__PURE__ */ jsx(VenusIcon, { className: "size-4" });
+      break;
+    }
+    case "transgender": {
+      icon = /* @__PURE__ */ jsx(TransgenderIcon, { className: "size-4" });
+      break;
+    }
+    case "androgyne": {
+      icon = /* @__PURE__ */ jsx(MarsStrokeIcon, { className: "size-4" });
+      break;
+    }
+    case "non-binary": {
+      icon = /* @__PURE__ */ jsx(NonBinaryIcon, { className: "size-4" });
+      break;
+    }
+    case "intersex": {
+      icon = /* @__PURE__ */ jsx(VenusAndMarsIcon, { className: "size-4" });
+      break;
+    }
+    default: {
+      icon = /* @__PURE__ */ jsx(CircleSmallIcon, { className: "size-4" });
+    }
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props, children: children ?? icon });
+};
+var VoiceSelectorAccent = ({
+  className,
+  value,
+  children,
+  ...props
+}) => {
+  let emoji = null;
+  switch (value) {
+    case "american": {
+      emoji = "\u{1F1FA}\u{1F1F8}";
+      break;
+    }
+    case "british": {
+      emoji = "\u{1F1EC}\u{1F1E7}";
+      break;
+    }
+    case "australian": {
+      emoji = "\u{1F1E6}\u{1F1FA}";
+      break;
+    }
+    case "canadian": {
+      emoji = "\u{1F1E8}\u{1F1E6}";
+      break;
+    }
+    case "irish": {
+      emoji = "\u{1F1EE}\u{1F1EA}";
+      break;
+    }
+    case "scottish": {
+      emoji = "\u{1F3F4}\u{E0067}\u{E0062}\u{E0073}\u{E0063}\u{E0074}\u{E007F}";
+      break;
+    }
+    case "indian": {
+      emoji = "\u{1F1EE}\u{1F1F3}";
+      break;
+    }
+    case "south-african": {
+      emoji = "\u{1F1FF}\u{1F1E6}";
+      break;
+    }
+    case "new-zealand": {
+      emoji = "\u{1F1F3}\u{1F1FF}";
+      break;
+    }
+    case "spanish": {
+      emoji = "\u{1F1EA}\u{1F1F8}";
+      break;
+    }
+    case "french": {
+      emoji = "\u{1F1EB}\u{1F1F7}";
+      break;
+    }
+    case "german": {
+      emoji = "\u{1F1E9}\u{1F1EA}";
+      break;
+    }
+    case "italian": {
+      emoji = "\u{1F1EE}\u{1F1F9}";
+      break;
+    }
+    case "portuguese": {
+      emoji = "\u{1F1F5}\u{1F1F9}";
+      break;
+    }
+    case "brazilian": {
+      emoji = "\u{1F1E7}\u{1F1F7}";
+      break;
+    }
+    case "mexican": {
+      emoji = "\u{1F1F2}\u{1F1FD}";
+      break;
+    }
+    case "argentinian": {
+      emoji = "\u{1F1E6}\u{1F1F7}";
+      break;
+    }
+    case "japanese": {
+      emoji = "\u{1F1EF}\u{1F1F5}";
+      break;
+    }
+    case "chinese": {
+      emoji = "\u{1F1E8}\u{1F1F3}";
+      break;
+    }
+    case "korean": {
+      emoji = "\u{1F1F0}\u{1F1F7}";
+      break;
+    }
+    case "russian": {
+      emoji = "\u{1F1F7}\u{1F1FA}";
+      break;
+    }
+    case "arabic": {
+      emoji = "\u{1F1F8}\u{1F1E6}";
+      break;
+    }
+    case "dutch": {
+      emoji = "\u{1F1F3}\u{1F1F1}";
+      break;
+    }
+    case "swedish": {
+      emoji = "\u{1F1F8}\u{1F1EA}";
+      break;
+    }
+    case "norwegian": {
+      emoji = "\u{1F1F3}\u{1F1F4}";
+      break;
+    }
+    case "danish": {
+      emoji = "\u{1F1E9}\u{1F1F0}";
+      break;
+    }
+    case "finnish": {
+      emoji = "\u{1F1EB}\u{1F1EE}";
+      break;
+    }
+    case "polish": {
+      emoji = "\u{1F1F5}\u{1F1F1}";
+      break;
+    }
+    case "turkish": {
+      emoji = "\u{1F1F9}\u{1F1F7}";
+      break;
+    }
+    case "greek": {
+      emoji = "\u{1F1EC}\u{1F1F7}";
+      break;
+    }
+    default: {
+      emoji = null;
+    }
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props, children: children ?? emoji });
+};
+var VoiceSelectorAge = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("text-muted-foreground text-xs tabular-nums", className),
+    ...props
+  }
+);
+var VoiceSelectorName = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("flex-1 truncate text-left font-medium", className),
+    ...props
+  }
+);
+var VoiceSelectorDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props });
+var VoiceSelectorAttributes = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center text-xs", className), ...props, children });
+var VoiceSelectorBullet = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: cn("select-none text-border", className),
+    ...props,
+    children: "\u2022"
+  }
+);
+var VoiceSelectorPreview = ({
+  className,
+  playing,
+  loading,
+  onPlay,
+  onClick,
+  ...props
+}) => {
+  const handleClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onClick?.(event);
+      onPlay?.();
+    },
+    [onClick, onPlay]
+  );
+  let icon = /* @__PURE__ */ jsx(PlayIcon, { className: "size-3" });
+  if (loading) {
+    icon = /* @__PURE__ */ jsx(Spinner, { className: "size-3" });
+  } else if (playing) {
+    icon = /* @__PURE__ */ jsx(PauseIcon, { className: "size-3" });
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": playing ? "Pause preview" : "Play preview",
+      className: cn("size-6", className),
+      disabled: loading,
+      onClick: handleClick,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: icon
+    }
+  );
+};
+
+export { VoiceSelector, VoiceSelectorAccent, VoiceSelectorAge, VoiceSelectorAttributes, VoiceSelectorBullet, VoiceSelectorContent, VoiceSelectorDescription, VoiceSelectorDialog, VoiceSelectorEmpty, VoiceSelectorGender, VoiceSelectorGroup, VoiceSelectorInput, VoiceSelectorItem, VoiceSelectorList, VoiceSelectorName, VoiceSelectorPreview, VoiceSelectorSeparator, VoiceSelectorShortcut, VoiceSelectorTrigger, useVoiceSelector };

package/dist/components/ai-elements/web-preview.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Input } from '@chatsdk-dev/ui/components/input';
+import { ComponentProps, ReactNode } from 'react';
+
+interface WebPreviewContextValue {
+    url: string;
+    setUrl: (url: string) => void;
+    consoleOpen: boolean;
+    setConsoleOpen: (open: boolean) => void;
+}
+type WebPreviewProps = ComponentProps<"div"> & {
+    defaultUrl?: string;
+    onUrlChange?: (url: string) => void;
+};
+declare const WebPreview: ({ className, children, defaultUrl, onUrlChange, ...props }: WebPreviewProps) => react_jsx_runtime.JSX.Element;
+type WebPreviewNavigationProps = ComponentProps<"div">;
+declare const WebPreviewNavigation: ({ className, children, ...props }: WebPreviewNavigationProps) => react_jsx_runtime.JSX.Element;
+type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+};
+declare const WebPreviewNavigationButton: ({ onClick, disabled, tooltip, children, ...props }: WebPreviewNavigationButtonProps) => react_jsx_runtime.JSX.Element;
+type WebPreviewUrlProps = ComponentProps<typeof Input>;
+declare const WebPreviewUrl: ({ value, onChange, onKeyDown, ...props }: WebPreviewUrlProps) => react_jsx_runtime.JSX.Element;
+type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+    loading?: ReactNode;
+};
+declare const WebPreviewBody: ({ className, loading, src, ...props }: WebPreviewBodyProps) => react_jsx_runtime.JSX.Element;
+type WebPreviewConsoleProps = ComponentProps<"div"> & {
+    logs?: {
+        level: "log" | "warn" | "error";
+        message: string;
+        timestamp: Date;
+    }[];
+};
+declare const WebPreviewConsole: ({ className, logs, children, ...props }: WebPreviewConsoleProps) => react_jsx_runtime.JSX.Element;
+
+export { WebPreview, WebPreviewBody, type WebPreviewBodyProps, WebPreviewConsole, type WebPreviewConsoleProps, type WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, type WebPreviewNavigationButtonProps, type WebPreviewNavigationProps, type WebPreviewProps, WebPreviewUrl, type WebPreviewUrlProps };

package/dist/components/ai-elements/web-preview.js

@@ -0,0 +1,214 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { Input } from '@chatsdk-dev/ui/components/input';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@chatsdk-dev/ui/components/tooltip';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { createContext, useState, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var WebPreviewContext = createContext(null);
+var useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+var WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}) => {
+  const [url, setUrl] = useState(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState(false);
+  const handleUrlChange = useCallback(
+    (newUrl) => {
+      setUrl(newUrl);
+      onUrlChange?.(newUrl);
+    },
+    [onUrlChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      consoleOpen,
+      setConsoleOpen,
+      setUrl: handleUrlChange,
+      url
+    }),
+    [consoleOpen, handleUrlChange, url]
+  );
+  return /* @__PURE__ */ jsx(WebPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex size-full flex-col rounded-lg border bg-card",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+var WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center gap-1 border-b p-2", className),
+    ...props,
+    children
+  }
+);
+var WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(
+    TooltipTrigger,
+    {
+      render: () => /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "h-8 w-8 p-0 hover:text-foreground",
+          disabled,
+          onClick,
+          size: "sm",
+          variant: "ghost",
+          ...props,
+          children
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+] }) });
+var WebPreviewUrl = ({
+  value,
+  onChange,
+  onKeyDown,
+  ...props
+}) => {
+  const { url, setUrl } = useWebPreview();
+  const [prevUrl, setPrevUrl] = useState(url);
+  const [inputValue, setInputValue] = useState(url);
+  if (url !== prevUrl) {
+    setPrevUrl(url);
+    setInputValue(url);
+  }
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        const target = event.target;
+        setUrl(target.value);
+      }
+      onKeyDown?.(event);
+    },
+    [setUrl, onKeyDown]
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: "h-8 flex-1 text-sm",
+      onChange: onChange ?? handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: "Enter URL...",
+      value: value ?? inputValue,
+      ...props
+    }
+  );
+};
+var WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  ...props
+}) => {
+  const { url } = useWebPreview();
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        className: cn("size-full", className),
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-presentation",
+        src: (src ?? url) || void 0,
+        title: "Preview",
+        ...props
+      }
+    ),
+    loading
+  ] });
+};
+var WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      className: cn("border-t bg-muted/50 font-mono text-sm", className),
+      onOpenChange: setConsoleOpen,
+      open: consoleOpen,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          CollapsibleTrigger,
+          {
+            render: () => /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50",
+                variant: "ghost",
+                children: "Console"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CollapsibleContent,
+          {
+            className: cn(
+              "px-4 pb-4",
+              "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto", children: [
+              logs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No console output" }) : logs.map((log) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-xs",
+                    log.level === "error" && "text-destructive",
+                    log.level === "warn" && "text-yellow-600",
+                    log.level === "log" && "text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: log.timestamp.toLocaleTimeString() }),
+                    " ",
+                    log.message
+                  ]
+                },
+                `${log.timestamp.getTime()}-${log.level}-${log.message}`
+              )),
+              children
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl };

package/dist/components/info-card.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+
+interface InfoCardProps {
+    title: string;
+    description?: string;
+    children?: react.ReactNode;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    className?: string;
+}
+declare function InfoCard({ title, description, children, actionLabel, onActionClick, className, }: InfoCardProps): react_jsx_runtime.JSX.Element;
+
+export { InfoCard, type InfoCardProps };

package/dist/components/info-card.js

@@ -0,0 +1 @@
+export { InfoCard } from '../chunk-EGIUE7H2.js';

package/dist/components/responsive-alert-dialog.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ResponsiveAlertDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+    trigger?: React.ReactElement;
+    title?: React.ReactNode;
+    titleIcon?: React.ReactNode;
+    description?: React.ReactNode;
+    isPending?: boolean;
+    action?: React.ReactNode;
+    onAction?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    cancelLabel?: React.ReactNode;
+    onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare function ResponsiveAlertDialog({ open, onOpenChange, children, trigger, title, titleIcon, description, isPending, action, onAction, cancelLabel, onCancel, }: ResponsiveAlertDialogProps): react_jsx_runtime.JSX.Element;
+
+export { ResponsiveAlertDialog, type ResponsiveAlertDialogProps };

package/dist/components/responsive-alert-dialog.js

@@ -0,0 +1 @@
+export { ResponsiveAlertDialog } from '../chunk-QTRMNIG3.js';

package/dist/components/responsive-dialog.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ResponsiveDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactElement;
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare function ResponsiveDialog({ open, onOpenChange, trigger, children, title, description, footer, }: ResponsiveDialogProps): react_jsx_runtime.JSX.Element;
+
+export { ResponsiveDialog, type ResponsiveDialogProps };

package/dist/components/responsive-dialog.js

@@ -0,0 +1 @@
+export { ResponsiveDialog } from '../chunk-YXFVHSY4.js';