@openconsole/shadcn 0.2.5 → 0.2.7

package/components/ai-elements/transcription.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { cn } from "../../lib/utils";
-import type { Experimental_TranscriptionResult as TranscriptionResult } from "ai";
-import type { ComponentProps, ReactNode } from "react";
-import { createContext, useCallback, useContext, useMemo } from "react";
-
-type TranscriptionSegment = TranscriptionResult["segments"][number];
-
-interface TranscriptionContextValue {
-  segments: TranscriptionSegment[];
-  currentTime: number;
-  onTimeUpdate: (time: number) => void;
-  onSeek?: (time: number) => void;
-}
-
-const TranscriptionContext = createContext<TranscriptionContextValue | null>(
-  null
-);
-
-const useTranscription = () => {
-  const context = useContext(TranscriptionContext);
-  if (!context) {
-    throw new Error(
-      "Transcription components must be used within Transcription"
-    );
-  }
-  return context;
-};
-
-export type TranscriptionProps = Omit<ComponentProps<"div">, "children"> & {
-  segments: TranscriptionSegment[];
-  currentTime?: number;
-  onSeek?: (time: number) => void;
-  children: (segment: TranscriptionSegment, index: number) => ReactNode;
-};
-
-export const Transcription = ({
-  segments,
-  currentTime: externalCurrentTime,
-  onSeek,
-  className,
-  children,
-  ...props
-}: TranscriptionProps) => {
-  const [currentTime, setCurrentTime] = useControllableState({
-    defaultProp: 0,
-    onChange: onSeek,
-    prop: externalCurrentTime,
-  });
-
-  const contextValue = useMemo(
-    () => ({ currentTime, onSeek, onTimeUpdate: setCurrentTime, segments }),
-    [currentTime, onSeek, setCurrentTime, segments]
-  );
-
-  return (
-    <TranscriptionContext.Provider value={contextValue}>
-      <div
-        className={cn(
-          "flex flex-wrap gap-1 text-sm leading-relaxed",
-          className
-        )}
-        data-slot="transcription"
-        {...props}
-      >
-        {segments
-          .filter((segment) => segment.text.trim())
-          .map((segment, index) => children(segment, index))}
-      </div>
-    </TranscriptionContext.Provider>
-  );
-};
-
-export type TranscriptionSegmentProps = ComponentProps<"button"> & {
-  segment: TranscriptionSegment;
-  index: number;
-};
-
-export const TranscriptionSegment = ({
-  segment,
-  index,
-  className,
-  onClick,
-  ...props
-}: TranscriptionSegmentProps) => {
-  const { currentTime, onSeek } = useTranscription();
-
-  const isActive =
-    currentTime >= segment.startSecond && currentTime < segment.endSecond;
-  const isPast = currentTime >= segment.endSecond;
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (onSeek) {
-        onSeek(segment.startSecond);
-      }
-      onClick?.(event);
-    },
-    [onSeek, segment.startSecond, onClick]
-  );
-
-  return (
-    <button
-      className={cn(
-        "inline text-left",
-        isActive && "text-primary",
-        isPast && "text-muted-foreground",
-        !(isActive || isPast) && "text-muted-foreground/60",
-        onSeek && "cursor-pointer hover:text-foreground",
-        !onSeek && "cursor-default",
-        className
-      )}
-      data-active={isActive}
-      data-index={index}
-      data-slot="transcription-segment"
-      onClick={handleClick}
-      type="button"
-      {...props}
-    >
-      {segment.text}
-    </button>
-  );
-};

package/components/ai-elements/voice-selector.tsx

@@ -1,524 +0,0 @@
-"use client";
-
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { Button } from "../ui/button";
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "../ui/command";
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
-import { Spinner } from "../ui/spinner";
-import { cn } from "../../lib/utils";
-import {
-  CircleSmallIcon,
-  MarsIcon,
-  MarsStrokeIcon,
-  NonBinaryIcon,
-  PauseIcon,
-  PlayIcon,
-  TransgenderIcon,
-  VenusAndMarsIcon,
-  VenusIcon,
-} from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-import { createContext, useCallback, useContext, useMemo } from "react";
-
-interface VoiceSelectorContextValue {
-  value: string | undefined;
-  setValue: (value: string | undefined) => void;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-const VoiceSelectorContext = createContext<VoiceSelectorContextValue | null>(
-  null
-);
-
-export const useVoiceSelector = () => {
-  const context = useContext(VoiceSelectorContext);
-  if (!context) {
-    throw new Error(
-      "VoiceSelector components must be used within VoiceSelector"
-    );
-  }
-  return context;
-};
-
-export type VoiceSelectorProps = ComponentProps<typeof Dialog> & {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string | undefined) => void;
-};
-
-export const VoiceSelector = ({
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  children,
-  ...props
-}: VoiceSelectorProps) => {
-  const [value, setValue] = useControllableState({
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: valueProp,
-  });
-
-  const [open, setOpen] = useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp,
-  });
-
-  const voiceSelectorContext = useMemo(
-    () => ({ open, setOpen, setValue, value }),
-    [value, setValue, open, setOpen]
-  );
-
-  return (
-    <VoiceSelectorContext.Provider value={voiceSelectorContext}>
-      <Dialog onOpenChange={setOpen} open={open} {...props}>
-        {children}
-      </Dialog>
-    </VoiceSelectorContext.Provider>
-  );
-};
-
-export type VoiceSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
-
-export const VoiceSelectorTrigger = (props: VoiceSelectorTriggerProps) => (
-  <DialogTrigger {...props} />
-);
-
-export type VoiceSelectorContentProps = ComponentProps<typeof DialogContent> & {
-  title?: ReactNode;
-};
-
-export const VoiceSelectorContent = ({
-  className,
-  children,
-  title = "Voice Selector",
-  ...props
-}: VoiceSelectorContentProps) => (
-  <DialogContent
-    aria-describedby={undefined}
-    className={cn("p-0", className)}
-    {...props}
-  >
-    <DialogTitle className="sr-only">{title}</DialogTitle>
-    <Command className="**:data-[slot=command-input-wrapper]:h-auto">
-      {children}
-    </Command>
-  </DialogContent>
-);
-
-export type VoiceSelectorDialogProps = ComponentProps<typeof CommandDialog>;
-
-export const VoiceSelectorDialog = (props: VoiceSelectorDialogProps) => (
-  <CommandDialog {...props} />
-);
-
-export type VoiceSelectorInputProps = ComponentProps<typeof CommandInput>;
-
-export const VoiceSelectorInput = ({
-  className,
-  ...props
-}: VoiceSelectorInputProps) => (
-  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
-);
-
-export type VoiceSelectorListProps = ComponentProps<typeof CommandList>;
-
-export const VoiceSelectorList = (props: VoiceSelectorListProps) => (
-  <CommandList {...props} />
-);
-
-export type VoiceSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
-
-export const VoiceSelectorEmpty = (props: VoiceSelectorEmptyProps) => (
-  <CommandEmpty {...props} />
-);
-
-export type VoiceSelectorGroupProps = ComponentProps<typeof CommandGroup>;
-
-export const VoiceSelectorGroup = (props: VoiceSelectorGroupProps) => (
-  <CommandGroup {...props} />
-);
-
-export type VoiceSelectorItemProps = ComponentProps<typeof CommandItem>;
-
-export const VoiceSelectorItem = ({
-  className,
-  ...props
-}: VoiceSelectorItemProps) => (
-  <CommandItem className={cn("px-4 py-2", className)} {...props} />
-);
-
-export type VoiceSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
-
-export const VoiceSelectorShortcut = (props: VoiceSelectorShortcutProps) => (
-  <CommandShortcut {...props} />
-);
-
-export type VoiceSelectorSeparatorProps = ComponentProps<
-  typeof CommandSeparator
->;
-
-export const VoiceSelectorSeparator = (props: VoiceSelectorSeparatorProps) => (
-  <CommandSeparator {...props} />
-);
-
-export type VoiceSelectorGenderProps = ComponentProps<"span"> & {
-  value?:
-    | "male"
-    | "female"
-    | "transgender"
-    | "androgyne"
-    | "non-binary"
-    | "intersex";
-};
-
-export const VoiceSelectorGender = ({
-  className,
-  value,
-  children,
-  ...props
-}: VoiceSelectorGenderProps) => {
-  let icon: ReactNode | null = null;
-
-  switch (value) {
-    case "male": {
-      icon = <MarsIcon className="size-4" />;
-      break;
-    }
-    case "female": {
-      icon = <VenusIcon className="size-4" />;
-      break;
-    }
-    case "transgender": {
-      icon = <TransgenderIcon className="size-4" />;
-      break;
-    }
-    case "androgyne": {
-      icon = <MarsStrokeIcon className="size-4" />;
-      break;
-    }
-    case "non-binary": {
-      icon = <NonBinaryIcon className="size-4" />;
-      break;
-    }
-    case "intersex": {
-      icon = <VenusAndMarsIcon className="size-4" />;
-      break;
-    }
-    default: {
-      icon = <CircleSmallIcon className="size-4" />;
-    }
-  }
-
-  return (
-    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
-      {children ?? icon}
-    </span>
-  );
-};
-
-export type VoiceSelectorAccentProps = ComponentProps<"span"> & {
-  value?:
-    | "american"
-    | "british"
-    | "australian"
-    | "canadian"
-    | "irish"
-    | "scottish"
-    | "indian"
-    | "south-african"
-    | "new-zealand"
-    | "spanish"
-    | "french"
-    | "german"
-    | "italian"
-    | "portuguese"
-    | "brazilian"
-    | "mexican"
-    | "argentinian"
-    | "japanese"
-    | "chinese"
-    | "korean"
-    | "russian"
-    | "arabic"
-    | "dutch"
-    | "swedish"
-    | "norwegian"
-    | "danish"
-    | "finnish"
-    | "polish"
-    | "turkish"
-    | "greek"
-    | string;
-};
-
-export const VoiceSelectorAccent = ({
-  className,
-  value,
-  children,
-  ...props
-}: VoiceSelectorAccentProps) => {
-  let emoji: string | null = 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 (
-    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
-      {children ?? emoji}
-    </span>
-  );
-};
-
-export type VoiceSelectorAgeProps = ComponentProps<"span">;
-
-export const VoiceSelectorAge = ({
-  className,
-  ...props
-}: VoiceSelectorAgeProps) => (
-  <span
-    className={cn("text-muted-foreground text-xs tabular-nums", className)}
-    {...props}
-  />
-);
-
-export type VoiceSelectorNameProps = ComponentProps<"span">;
-
-export const VoiceSelectorName = ({
-  className,
-  ...props
-}: VoiceSelectorNameProps) => (
-  <span
-    className={cn("flex-1 truncate text-left font-medium", className)}
-    {...props}
-  />
-);
-
-export type VoiceSelectorDescriptionProps = ComponentProps<"span">;
-
-export const VoiceSelectorDescription = ({
-  className,
-  ...props
-}: VoiceSelectorDescriptionProps) => (
-  <span className={cn("text-muted-foreground text-xs", className)} {...props} />
-);
-
-export type VoiceSelectorAttributesProps = ComponentProps<"div">;
-
-export const VoiceSelectorAttributes = ({
-  className,
-  children,
-  ...props
-}: VoiceSelectorAttributesProps) => (
-  <div className={cn("flex items-center text-xs", className)} {...props}>
-    {children}
-  </div>
-);
-
-export type VoiceSelectorBulletProps = ComponentProps<"span">;
-
-export const VoiceSelectorBullet = ({
-  className,
-  ...props
-}: VoiceSelectorBulletProps) => (
-  <span
-    aria-hidden="true"
-    className={cn("select-none text-border", className)}
-    {...props}
-  >
-    &bull;
-  </span>
-);
-
-export type VoiceSelectorPreviewProps = Omit<
-  ComponentProps<"button">,
-  "children"
-> & {
-  playing?: boolean;
-  loading?: boolean;
-  onPlay?: () => void;
-};
-
-export const VoiceSelectorPreview = ({
-  className,
-  playing,
-  loading,
-  onPlay,
-  onClick,
-  ...props
-}: VoiceSelectorPreviewProps) => {
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      onClick?.(event);
-      onPlay?.();
-    },
-    [onClick, onPlay]
-  );
-
-  let icon = <PlayIcon className="size-3" />;
-
-  if (loading) {
-    icon = <Spinner className="size-3" />;
-  } else if (playing) {
-    icon = <PauseIcon className="size-3" />;
-  }
-
-  return (
-    <Button
-      aria-label={playing ? "Pause preview" : "Play preview"}
-      className={cn("size-6", className)}
-      disabled={loading}
-      onClick={handleClick}
-      size="icon-sm"
-      type="button"
-      variant="outline"
-      {...props}
-    >
-      {icon}
-    </Button>
-  );
-};