@chatsdk-dev/ui 0.1.2 → 0.2.0

package/dist/molecules/voice-selector.js

@@ -1,224 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { Button } from "@chatsdk-dev/ui/components/button";
-import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@chatsdk-dev/ui/components/command";
-import { Dialog, DialogContent, DialogTitle, DialogTrigger, } from "@chatsdk-dev/ui/components/dialog";
-import { Spinner } from "@chatsdk-dev/ui/components/spinner";
-import { cn } from "@chatsdk-dev/ui/lib/utils";
-import { CircleSmallIcon, MarsIcon, MarsStrokeIcon, NonBinaryIcon, PauseIcon, PlayIcon, TransgenderIcon, VenusAndMarsIcon, VenusIcon, } from "lucide-react";
-import { createContext, useCallback, useContext, useMemo } from "react";
-const VoiceSelectorContext = createContext(null);
-export const useVoiceSelector = () => {
-    const context = useContext(VoiceSelectorContext);
-    if (!context) {
-        throw new Error("VoiceSelector components must be used within VoiceSelector");
-    }
-    return context;
-};
-export const 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: (open) => onOpenChange?.(open, {}),
-        prop: openProp,
-    });
-    const voiceSelectorContext = useMemo(() => ({ open, setOpen, setValue, value }), [value, setValue, open, setOpen]);
-    return (_jsx(VoiceSelectorContext.Provider, { value: voiceSelectorContext, children: _jsx(Dialog, { onOpenChange: setOpen, open: open, ...props, children: children }) }));
-};
-export const VoiceSelectorTrigger = (props) => (_jsx(DialogTrigger, { ...props }));
-export const VoiceSelectorContent = ({ className, children, title = "Voice Selector", ...props }) => (_jsxs(DialogContent, { "aria-describedby": undefined, className: cn("p-0", className), ...props, children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children: children })] }));
-export const VoiceSelectorDialog = (props) => (_jsx(CommandDialog, { ...props }));
-export const VoiceSelectorInput = ({ className, ...props }) => (_jsx(CommandInput, { className: cn("h-auto py-3.5", className), ...props }));
-export const VoiceSelectorList = (props) => (_jsx(CommandList, { ...props }));
-export const VoiceSelectorEmpty = (props) => (_jsx(CommandEmpty, { ...props }));
-export const VoiceSelectorGroup = (props) => (_jsx(CommandGroup, { ...props }));
-export const VoiceSelectorItem = ({ className, ...props }) => (_jsx(CommandItem, { className: cn("px-4 py-2", className), ...props }));
-export const VoiceSelectorShortcut = (props) => (_jsx(CommandShortcut, { ...props }));
-export const VoiceSelectorSeparator = (props) => (_jsx(CommandSeparator, { ...props }));
-export const VoiceSelectorGender = ({ className, value, children, ...props }) => {
-    let icon = null;
-    switch (value) {
-        case "male": {
-            icon = _jsx(MarsIcon, { className: "size-4" });
-            break;
-        }
-        case "female": {
-            icon = _jsx(VenusIcon, { className: "size-4" });
-            break;
-        }
-        case "transgender": {
-            icon = _jsx(TransgenderIcon, { className: "size-4" });
-            break;
-        }
-        case "androgyne": {
-            icon = _jsx(MarsStrokeIcon, { className: "size-4" });
-            break;
-        }
-        case "non-binary": {
-            icon = _jsx(NonBinaryIcon, { className: "size-4" });
-            break;
-        }
-        case "intersex": {
-            icon = _jsx(VenusAndMarsIcon, { className: "size-4" });
-            break;
-        }
-        default: {
-            icon = _jsx(CircleSmallIcon, { className: "size-4" });
-        }
-    }
-    return (_jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props, children: children ?? icon }));
-};
-export const VoiceSelectorAccent = ({ className, value, children, ...props }) => {
-    let emoji = null;
-    switch (value) {
-        case "american": {
-            emoji = "🇺🇸";
-            break;
-        }
-        case "british": {
-            emoji = "🇬🇧";
-            break;
-        }
-        case "australian": {
-            emoji = "🇦🇺";
-            break;
-        }
-        case "canadian": {
-            emoji = "🇨🇦";
-            break;
-        }
-        case "irish": {
-            emoji = "🇮🇪";
-            break;
-        }
-        case "scottish": {
-            emoji = "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
-            break;
-        }
-        case "indian": {
-            emoji = "🇮🇳";
-            break;
-        }
-        case "south-african": {
-            emoji = "🇿🇦";
-            break;
-        }
-        case "new-zealand": {
-            emoji = "🇳🇿";
-            break;
-        }
-        case "spanish": {
-            emoji = "🇪🇸";
-            break;
-        }
-        case "french": {
-            emoji = "🇫🇷";
-            break;
-        }
-        case "german": {
-            emoji = "🇩🇪";
-            break;
-        }
-        case "italian": {
-            emoji = "🇮🇹";
-            break;
-        }
-        case "portuguese": {
-            emoji = "🇵🇹";
-            break;
-        }
-        case "brazilian": {
-            emoji = "🇧🇷";
-            break;
-        }
-        case "mexican": {
-            emoji = "🇲🇽";
-            break;
-        }
-        case "argentinian": {
-            emoji = "🇦🇷";
-            break;
-        }
-        case "japanese": {
-            emoji = "🇯🇵";
-            break;
-        }
-        case "chinese": {
-            emoji = "🇨🇳";
-            break;
-        }
-        case "korean": {
-            emoji = "🇰🇷";
-            break;
-        }
-        case "russian": {
-            emoji = "🇷🇺";
-            break;
-        }
-        case "arabic": {
-            emoji = "🇸🇦";
-            break;
-        }
-        case "dutch": {
-            emoji = "🇳🇱";
-            break;
-        }
-        case "swedish": {
-            emoji = "🇸🇪";
-            break;
-        }
-        case "norwegian": {
-            emoji = "🇳🇴";
-            break;
-        }
-        case "danish": {
-            emoji = "🇩🇰";
-            break;
-        }
-        case "finnish": {
-            emoji = "🇫🇮";
-            break;
-        }
-        case "polish": {
-            emoji = "🇵🇱";
-            break;
-        }
-        case "turkish": {
-            emoji = "🇹🇷";
-            break;
-        }
-        case "greek": {
-            emoji = "🇬🇷";
-            break;
-        }
-        default: {
-            emoji = null;
-        }
-    }
-    return (_jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props, children: children ?? emoji }));
-};
-export const VoiceSelectorAge = ({ className, ...props }) => (_jsx("span", { className: cn("text-muted-foreground text-xs tabular-nums", className), ...props }));
-export const VoiceSelectorName = ({ className, ...props }) => (_jsx("span", { className: cn("flex-1 truncate text-left font-medium", className), ...props }));
-export const VoiceSelectorDescription = ({ className, ...props }) => (_jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props }));
-export const VoiceSelectorAttributes = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center text-xs", className), ...props, children: children }));
-export const VoiceSelectorBullet = ({ className, ...props }) => (_jsx("span", { "aria-hidden": "true", className: cn("select-none text-border", className), ...props, children: "\u2022" }));
-export const VoiceSelectorPreview = ({ className, playing, loading, onPlay, onClick, ...props }) => {
-    const handleClick = useCallback((event) => {
-        event.stopPropagation();
-        onClick?.(event);
-        onPlay?.();
-    }, [onClick, onPlay]);
-    let icon = _jsx(PlayIcon, { className: "size-3" });
-    if (loading) {
-        icon = _jsx(Spinner, { className: "size-3" });
-    }
-    else if (playing) {
-        icon = _jsx(PauseIcon, { className: "size-3" });
-    }
-    return (_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 }));
-};

package/dist/molecules/web-preview.d.ts

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

package/dist/molecules/web-preview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"web-preview.d.ts","sourceRoot":"","sources":["../../src/molecules/web-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAM3D,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AASzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvD,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAYD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,4DAMxB,eAAe,4CAmCjB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CAO3B,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,oDAMxC,+BAA+B,4CAsBjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,GAAI,0CAK3B,kBAAkB,4CAqCpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uCAK5B,mBAAmB,4CAgBrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;QAChC,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,IAAI,CAAC;KACjB,EAAE,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,yCAK/B,sBAAsB,4CAoDxB,CAAC"}

package/dist/molecules/web-preview.js

@@ -1,65 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@chatsdk-dev/ui/components/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@chatsdk-dev/ui/components/collapsible";
-import { Input } from "@chatsdk-dev/ui/components/input";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@chatsdk-dev/ui/components/tooltip";
-import { cn } from "@chatsdk-dev/ui/lib/utils";
-import { createContext, useCallback, useContext, useMemo, useState, } from "react";
-const WebPreviewContext = createContext(null);
-const useWebPreview = () => {
-    const context = useContext(WebPreviewContext);
-    if (!context) {
-        throw new Error("WebPreview components must be used within a WebPreview");
-    }
-    return context;
-};
-export const 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 (_jsx(WebPreviewContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("flex size-full flex-col rounded-lg border bg-card", className), ...props, children: children }) }));
-};
-export const WebPreviewNavigation = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-1 border-b p-2", className), ...props, children: children }));
-export const WebPreviewNavigationButton = ({ onClick, disabled, tooltip, children, ...props }) => (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: () => (_jsx(Button, { className: "h-8 w-8 p-0 hover:text-foreground", disabled: disabled, onClick: onClick, size: "sm", variant: "ghost", ...props, children: children })) }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
-export const WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }) => {
-    const { url, setUrl } = useWebPreview();
-    const [prevUrl, setPrevUrl] = useState(url);
-    const [inputValue, setInputValue] = useState(url);
-    // Sync input value with context URL when it changes externally (derived state pattern)
-    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 (_jsx(Input, { className: "h-8 flex-1 text-sm", onChange: onChange ?? handleChange, onKeyDown: handleKeyDown, placeholder: "Enter URL...", value: value ?? inputValue, ...props }));
-};
-export const WebPreviewBody = ({ className, loading, src, ...props }) => {
-    const { url } = useWebPreview();
-    return (_jsxs("div", { className: "flex-1", children: [_jsx("iframe", { className: cn("size-full", className), 
-                // oxlint-disable-next-line eslint-plugin-react(iframe-missing-sandbox)
-                sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-presentation", src: (src ?? url) || undefined, title: "Preview", ...props }), loading] }));
-};
-export const WebPreviewConsole = ({ className, logs = [], children, ...props }) => {
-    const { consoleOpen, setConsoleOpen } = useWebPreview();
-    return (_jsxs(Collapsible, { className: cn("border-t bg-muted/50 font-mono text-sm", className), onOpenChange: setConsoleOpen, open: consoleOpen, ...props, children: [_jsx(CollapsibleTrigger, { render: () => (_jsx(Button, { className: "flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50", variant: "ghost", children: "Console" })) }), _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: _jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto", children: [logs.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "No console output" })) : (logs.map((log) => (_jsxs("div", { className: cn("text-xs", log.level === "error" && "text-destructive", log.level === "warn" && "text-yellow-600", log.level === "log" && "text-foreground"), children: [_jsx("span", { className: "text-muted-foreground", children: log.timestamp.toLocaleTimeString() }), " ", log.message] }, `${log.timestamp.getTime()}-${log.level}-${log.message}`)))), children] }) })] }));
-};