@chatsdk-dev/elements 0.0.1 → 0.1.3

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

@@ -1,332 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,214 +0,0 @@
-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/responsive-alert-dialog.d.ts

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

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