@ciridae/ui 0.2.4 → 0.3.0

package/dist/components/agentic/voice-selector.js

@@ -1,122 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable max-lines, react-refresh/only-export-components */
-import { CircleSmallIcon, MarsIcon, PauseIcon, PlayIcon, TransgenderIcon, VenusAndMarsIcon, VenusIcon, } from "lucide-react";
-import * as React from "react";
-import { Button } from "@ciridae/ui/button";
-import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@ciridae/ui/command";
-import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@ciridae/ui/dialog";
-import { Spinner } from "@ciridae/ui/spinner";
-import { cn } from "@ciridae/ui/utils";
-import { useControllableState } from "./use-controllable-state";
-const VoiceSelectorContext = React.createContext(null);
-function VoiceSelector({ children, defaultOpen = false, defaultValue, onOpenChange, onValueChange, open: openProp, value: valueProp, voices = [], ...props }) {
-    const [value, setValue] = useControllableState({
-        defaultValue,
-        onChange: onValueChange,
-        value: valueProp,
-    });
-    const [open, setOpen] = useControllableState({
-        defaultValue: defaultOpen,
-        onChange: onOpenChange,
-        value: openProp,
-    });
-    const contextValue = React.useMemo(() => ({ open, setOpen, setValue, value, voices }), [open, setOpen, setValue, value, voices]);
-    return (_jsx(VoiceSelectorContext.Provider, { value: contextValue, children: _jsx(Dialog, { onOpenChange: setOpen, open: open, ...props, children: children ?? _jsx(VoiceSelectorDefaultContent, {}) }) }));
-}
-function VoiceSelectorDefaultContent() {
-    const { voices } = useVoiceSelector();
-    return (_jsxs(_Fragment, { children: [_jsx(VoiceSelectorTrigger, { asChild: true, children: _jsx(Button, { className: "w-64 justify-between", variant: "outline", children: _jsx(VoiceSelectorValue, { className: "max-w-52 text-left" }) }) }), _jsxs(VoiceSelectorContent, { children: [_jsx(VoiceSelectorInput, { placeholder: "Search voices..." }), _jsxs(VoiceSelectorList, { children: [_jsx(VoiceSelectorEmpty, { children: "No voices found." }), _jsx(VoiceSelectorGroup, { heading: "Voices", children: voices.map((voice) => (_jsx(VoiceSelectorItem, { voice: voice }, voice.id))) })] })] })] }));
-}
-function useVoiceSelector() {
-    const context = React.useContext(VoiceSelectorContext);
-    if (!context)
-        throw new Error("VoiceSelector components must be used within VoiceSelector");
-    return context;
-}
-function VoiceSelectorTrigger(props) {
-    return _jsx(DialogTrigger, { ...props });
-}
-function VoiceSelectorContent({ children, className, title = "Voice selector", ...props }) {
-    return (_jsxs(DialogContent, { "aria-describedby": undefined, className: cn("overflow-hidden p-0 sm:max-w-xl", className), ...props, children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children: children })] }));
-}
-function VoiceSelectorDialog(props) {
-    return _jsx(CommandDialog, { ...props });
-}
-function VoiceSelectorInput({ className, ...props }) {
-    return _jsx(CommandInput, { className: cn("h-auto py-3", className), ...props });
-}
-function VoiceSelectorList(props) {
-    return _jsx(CommandList, { ...props });
-}
-function VoiceSelectorEmpty(props) {
-    return _jsx(CommandEmpty, { ...props });
-}
-function VoiceSelectorGroup(props) {
-    return _jsx(CommandGroup, { ...props });
-}
-function VoiceSelectorItem({ children, onSelect, value, voice, ...props }) {
-    const { setOpen, setValue } = useVoiceSelector();
-    const itemValue = value ?? voice?.id;
-    return (_jsx(CommandItem, { onSelect: (currentValue) => {
-            setValue(itemValue ?? currentValue);
-            setOpen(false);
-            onSelect?.(currentValue);
-        }, value: itemValue, ...props, children: children ?? (voice ? _jsx(VoiceSelectorOption, { voice: voice }) : null) }));
-}
-function VoiceSelectorOption({ voice }) {
-    return (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsx(VoiceSelectorName, { children: voice.label }), _jsxs(VoiceSelectorAttributes, { children: [voice.gender ? _jsx(VoiceSelectorGender, { value: voice.gender }) : null, voice.accent ? _jsx(VoiceSelectorAccent, { value: voice.accent }) : null, voice.age ? _jsx(VoiceSelectorAge, { children: voice.age }) : null] }), voice.description ? (_jsx(VoiceSelectorDescription, { children: voice.description })) : null] }), voice.previewLabel ? (_jsx(VoiceSelectorShortcut, { children: voice.previewLabel })) : null] }));
-}
-function VoiceSelectorShortcut(props) {
-    return _jsx(CommandShortcut, { ...props });
-}
-function VoiceSelectorSeparator(props) {
-    return _jsx(CommandSeparator, { ...props });
-}
-function VoiceSelectorGender({ className, value, ...props }) {
-    return (_jsx("span", { className: cn("inline-flex items-center gap-1", className), ...props, children: _jsx(VoiceSelectorGenderIcon, { value: value }) }));
-}
-function VoiceSelectorAccent({ children, className, value, ...props }) {
-    return (_jsx("span", { className: cn("font-mono text-[0.6875rem] uppercase", className), ...props, children: children ?? value }));
-}
-function VoiceSelectorAge({ className, ...props }) {
-    return _jsx("span", { className: cn("text-[0.6875rem]", className), ...props });
-}
-function VoiceSelectorName({ className, ...props }) {
-    return _jsx("span", { className: cn("truncate font-medium", className), ...props });
-}
-function VoiceSelectorDescription({ className, ...props }) {
-    return _jsx("span", { className: cn("truncate text-xs text-muted-foreground", className), ...props });
-}
-function VoiceSelectorAttributes({ className, ...props }) {
-    return (_jsx("div", { className: cn("flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", className), ...props }));
-}
-function VoiceSelectorBullet({ className, ...props }) {
-    return (_jsx("span", { className: cn("text-muted-foreground", className), ...props, children: "-" }));
-}
-function VoiceSelectorValue({ className, placeholder = "Select voice", ...props }) {
-    const { value, voices } = useVoiceSelector();
-    const voice = voices.find((candidate) => candidate.id === value);
-    return (_jsx("span", { className: cn("truncate", className), ...props, children: voice?.label ?? placeholder }));
-}
-function VoiceSelectorPreview({ className, loading, onClick, onPlay, playing, type = "button", ...props }) {
-    const Icon = loading ? Spinner : playing ? PauseIcon : PlayIcon;
-    return (_jsx("button", { "aria-label": playing ? "Pause voice preview" : "Play voice preview", className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded-md border bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground", className), onClick: (event) => {
-            event.stopPropagation();
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                onPlay?.();
-        }, ...props, type: type, children: _jsx(Icon, { className: "size-3.5" }) }));
-}
-function VoiceSelectorGenderIcon({ value }) {
-    if (value === "male")
-        return _jsx(MarsIcon, { className: "size-3.5" });
-    if (value === "female")
-        return _jsx(VenusIcon, { className: "size-3.5" });
-    if (value === "transgender")
-        return _jsx(TransgenderIcon, { className: "size-3.5" });
-    if (value === "androgyne" || value === "intersex") {
-        return _jsx(VenusAndMarsIcon, { className: "size-3.5" });
-    }
-    return _jsx(CircleSmallIcon, { className: "size-3.5" });
-}
-export { VoiceSelector, VoiceSelectorAccent, VoiceSelectorAge, VoiceSelectorAttributes, VoiceSelectorBullet, VoiceSelectorContent, VoiceSelectorDescription, VoiceSelectorDialog, VoiceSelectorEmpty, VoiceSelectorGender, VoiceSelectorGroup, VoiceSelectorInput, VoiceSelectorItem, VoiceSelectorList, VoiceSelectorName, VoiceSelectorPreview, VoiceSelectorSeparator, VoiceSelectorShortcut, VoiceSelectorTrigger, VoiceSelectorValue, useVoiceSelector, };

package/dist/components/agentic/web-preview.d.ts

@@ -1,25 +0,0 @@
-import type * as React from "react";
-import { Button } from "@ciridae/ui/button";
-import { Input } from "@ciridae/ui/input";
-type WebPreviewProps = React.ComponentProps<"div"> & {
-    url: string;
-};
-type WebPreviewNavigationProps = React.ComponentProps<"div">;
-type WebPreviewNavigationButtonProps = React.ComponentProps<typeof Button> & {
-    action?: "back" | "forward" | "reload";
-};
-type WebPreviewUrlProps = Omit<React.ComponentProps<typeof Input>, "value"> & {
-    value?: string;
-};
-type WebPreviewBodyProps = React.ComponentProps<"iframe"> & {
-    src?: string;
-};
-type WebPreviewConsoleProps = React.ComponentProps<"div">;
-declare function WebPreview({ children, className, url, ...props }: WebPreviewProps): React.JSX.Element;
-declare function WebPreviewNavigation({ className, ...props }: WebPreviewNavigationProps): React.JSX.Element;
-declare function WebPreviewNavigationButton({ action, children, ...props }: WebPreviewNavigationButtonProps): React.JSX.Element;
-declare function WebPreviewUrl({ className, value, ...props }: WebPreviewUrlProps): React.JSX.Element;
-declare function WebPreviewBody({ className, referrerPolicy, sandbox, src, title, ...props }: WebPreviewBodyProps): React.JSX.Element;
-declare function WebPreviewConsole({ className, ...props }: WebPreviewConsoleProps): React.JSX.Element;
-export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, };
-export type { WebPreviewBodyProps, WebPreviewConsoleProps, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrlProps, };

package/dist/components/agentic/web-preview.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowLeftIcon, ArrowRightIcon, RotateCwIcon } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
-import { Button } from "@ciridae/ui/button";
-import { Input } from "@ciridae/ui/input";
-import { cn } from "@ciridae/ui/utils";
-const WebPreviewContext = createContext({ url: "" });
-function useWebPreview() {
-    return useContext(WebPreviewContext);
-}
-function WebPreview({ children, className, url, ...props }) {
-    const contextValue = useMemo(() => ({ url }), [url]);
-    return (_jsx(WebPreviewContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "web-preview", className: cn("flex min-h-0 w-full flex-col overflow-hidden rounded-lg border bg-card", className), ...props, children: children }) }));
-}
-function WebPreviewNavigation({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "web-preview-navigation", className: cn("flex min-w-0 items-center gap-2 border-b p-2", className), ...props }));
-}
-function WebPreviewNavigationButton({ action = "reload", children, ...props }) {
-    const Icon = action === "back" ? ArrowLeftIcon : action === "forward" ? ArrowRightIcon : RotateCwIcon;
-    return (_jsx(Button, { "aria-label": action, size: "icon", type: "button", variant: "ghost", ...props, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
-}
-function WebPreviewUrl({ className, value, ...props }) {
-    const { url } = useWebPreview();
-    return (_jsx(Input, { "data-slot": "web-preview-url", readOnly: true, value: value ?? url, className: cn("h-8 flex-1 font-mono text-xs", className), ...props }));
-}
-function WebPreviewBody({ className, referrerPolicy = "no-referrer", sandbox = "allow-scripts", src, title = "Web preview", ...props }) {
-    const { url } = useWebPreview();
-    return (_jsx("iframe", { "data-slot": "web-preview-body", className: cn("min-h-80 w-full flex-1 bg-background", className), referrerPolicy: referrerPolicy, sandbox: sandbox, src: src ?? url, title: title, ...props }));
-}
-function WebPreviewConsole({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "web-preview-console", className: cn("border-t bg-muted/40 p-3 font-mono text-xs text-muted-foreground", className), ...props }));
-}
-export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, };