@ctrl-ui/react 0.8.0

package/dist/extensions/track-highlight.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { createTrackHighlight } from "./create-track-highlight.js";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/extensions/track-highlight.tsx
+const trackHighlightStructureClasses = "pointer-events-none absolute -z-10";
+function TrackHighlight({ trackRef, itemSelector = "[data-track-item]", activeSelector = "[data-track-item][data-active=\"true\"]", range, followHover, hoverClassName, className, style, children, ...props }) {
+	const ref = useRef(null);
+	const hoverRef = useRef(null);
+	const layered = Boolean(hoverClassName);
+	useEffect(() => {
+		const highlight = ref.current;
+		const track = trackRef?.current ?? highlight?.parentElement;
+		if (!track || !highlight) return;
+		const hoverHighlight = layered ? hoverRef.current ?? void 0 : void 0;
+		return createTrackHighlight(track, highlight, {
+			itemSelector,
+			activeSelector,
+			range,
+			followHover
+		}, hoverHighlight);
+	}, [
+		trackRef,
+		itemSelector,
+		activeSelector,
+		range,
+		followHover,
+		layered
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"data-control-ui": "track-highlight",
+		"data-control-family": "track-highlight",
+		"data-slot": "root",
+		"aria-hidden": true,
+		style,
+		className: cn(trackHighlightStructureClasses, className),
+		children
+	}), layered ? /* @__PURE__ */ jsx("div", {
+		ref: hoverRef,
+		"data-control-ui": "track-highlight",
+		"data-control-family": "track-highlight",
+		"data-slot": "hover",
+		"aria-hidden": true,
+		style,
+		className: cn(trackHighlightStructureClasses, hoverClassName)
+	}) : null] });
+}
+//#endregion
+export { TrackHighlight };

package/dist/hooks/use-audio-recorder.d.ts

@@ -0,0 +1,107 @@
+//#region src/hooks/use-audio-recorder.d.ts
+type AudioRecorderState = "idle" | "requesting" | "recording" | "recorded" | "submitting" | "error";
+type AudioRecording = {
+  blob: Blob;
+  url: string;
+  durationMs: number;
+  mimeType: string;
+};
+type UseAudioRecorderOptions = {
+  onRecordingComplete?: (recording: AudioRecording) => void | Promise<void>;
+  onCancel?: () => void;
+  maxDurationMs?: number;
+  disabled?: boolean;
+  barCount?: number;
+  barDurationMs?: number;
+  deviceId?: string;
+};
+type AudioRecorderSnapshot = {
+  state: AudioRecorderState;
+  durationMs: number;
+  levels: number[];
+  error: Error | null;
+  recording?: AudioRecording;
+};
+type UseAudioRecorderResult = AudioRecorderSnapshot & {
+  isDisabled: boolean;
+  canStart: boolean;
+  canCancel: boolean;
+  canSubmit: boolean;
+  start: () => Promise<boolean>;
+  stop: () => Promise<AudioRecording | null>;
+  cancel: () => void;
+  submit: () => Promise<AudioRecording | null>;
+};
+type UseAudioInputDevicesResult = {
+  devices: MediaDeviceInfo[];
+  loading: boolean;
+  error: Error | null;
+  hasPermission: boolean;
+  refresh: () => Promise<void>;
+  requestPermission: () => Promise<void>;
+};
+type AudioRecorderStreamLike = {
+  getTracks: () => readonly {
+    stop: () => void;
+  }[];
+};
+type MediaRecorderLike = {
+  state: string;
+  mimeType: string;
+  ondataavailable: ((event: BlobEvent) => void) | null;
+  onstop: ((event: Event) => void) | null;
+  start(timeslice?: number): void;
+  stop(): void;
+};
+type MediaRecorderConstructor<TStream extends AudioRecorderStreamLike> = {
+  new (stream: TStream, options?: MediaRecorderOptions): MediaRecorderLike;
+  isTypeSupported?: (mimeType: string) => boolean;
+};
+type AnalyserLike = {
+  fftSize: number;
+  smoothingTimeConstant: number;
+  getByteTimeDomainData(samples: Uint8Array<ArrayBuffer>): void;
+};
+type AudioSourceLike = {
+  connect(destination: unknown): unknown;
+  disconnect(): void;
+};
+type AudioContextLike<TStream extends AudioRecorderStreamLike> = {
+  resume?(): Promise<void>;
+  close(): Promise<void>;
+  createMediaStreamSource(stream: TStream): AudioSourceLike;
+  createAnalyser(): AnalyserLike;
+};
+type AudioContextConstructor<TStream extends AudioRecorderStreamLike> = new () => AudioContextLike<TStream>;
+type AudioRecorderControllerEnvironment<TStream extends AudioRecorderStreamLike = AudioRecorderStreamLike> = {
+  mediaDevices?: {
+    getUserMedia: (constraints: MediaStreamConstraints) => Promise<TStream>;
+  };
+  MediaRecorder?: MediaRecorderConstructor<TStream>;
+  AudioContext?: AudioContextConstructor<TStream>;
+  requestAnimationFrame?: (callback: FrameRequestCallback) => number;
+  cancelAnimationFrame?: (handle: number) => void;
+  createObjectURL?: (blob: Blob) => string;
+  revokeObjectURL?: (url: string) => void;
+  now?: () => number;
+};
+declare function preferredAudioMimeType(MediaRecorderImpl?: {
+  isTypeSupported?: (mimeType: string) => boolean;
+}): "audio/mp4" | "audio/webm;codecs=opus" | undefined;
+declare function formatAudioInputDeviceLabel(device: MediaDeviceInfo, fallback?: string): string;
+declare function useAudioInputDevices(): UseAudioInputDevicesResult;
+declare function createAudioRecorderController<TStream extends AudioRecorderStreamLike = AudioRecorderStreamLike>(initialOptions?: UseAudioRecorderOptions, environment?: AudioRecorderControllerEnvironment<TStream>): {
+  getSnapshot: () => AudioRecorderSnapshot;
+  getResult: () => UseAudioRecorderResult;
+  setOptions: (nextOptions: UseAudioRecorderOptions) => void;
+  subscribe(listener: () => void): () => void;
+  isDestroyed: () => boolean;
+  start: () => Promise<boolean>;
+  stop: () => Promise<AudioRecording | null>;
+  cancel: () => void;
+  submit: () => Promise<AudioRecording | null>;
+  destroy: () => void;
+};
+declare function useAudioRecorder(options?: UseAudioRecorderOptions): UseAudioRecorderResult;
+//#endregion
+export { AudioRecorderControllerEnvironment, AudioRecorderSnapshot, AudioRecorderState, AudioRecorderStreamLike, AudioRecording, UseAudioInputDevicesResult, UseAudioRecorderOptions, UseAudioRecorderResult, createAudioRecorderController, formatAudioInputDeviceLabel, preferredAudioMimeType, useAudioInputDevices, useAudioRecorder };