@refraction-ui/react 0.4.1 → 0.5.0

package/dist/internal/voice-pill/index.d.cts

@@ -0,0 +1,86 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
+
+type VoicePillSpeaker = 'ai' | 'user' | (string & {});
+type VoicePillPosition = 'inline' | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
+interface VoicePillProps {
+    /** Speaker identity used for labels and data-speaker theming */
+    speaker?: VoicePillSpeaker;
+    /** Primary voice status text */
+    label: string;
+    /** Optional secondary status text */
+    sub?: string;
+    /** Voice activity intensity, clamped from 0 to 1 */
+    intensity?: number;
+    /** Whether voice output/input is muted */
+    muted?: boolean;
+    /** Callback for the optional mute toggle */
+    onToggleMute?: () => void;
+    /** Viewport position, or inline for embedding inside another layout */
+    position?: VoicePillPosition;
+}
+interface VoicePillStyleVars {
+    [key: `--${string}`]: string;
+}
+interface VoicePillAPI {
+    /** Display speaker label */
+    speaker: string;
+    /** Normalized key for data-speaker */
+    speakerKey: string;
+    /** Primary label */
+    label: string;
+    /** Secondary label */
+    sub?: string;
+    /** Clamped raw intensity */
+    intensity: number;
+    /** Intensity used for visual animation after muted state is applied */
+    visualIntensity: number;
+    /** Muted state */
+    muted: boolean;
+    /** Viewport position, or inline for embedding inside another layout */
+    position: VoicePillPosition;
+    /** Fallback initials for the speaker avatar */
+    initials: string;
+    /** Invoke the mute callback when provided */
+    toggleMute(): void;
+    /** ARIA props for the live status pill */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the mute toggle */
+    toggleMuteAriaProps: Record<string, unknown>;
+    /** Data attributes reflecting speaker/state */
+    dataAttributes: Record<string, string>;
+    /** CSS custom properties that drive pulse visuals */
+    style: VoicePillStyleVars;
+}
+declare const DEFAULT_VOICE_PILL_SPEAKER = "ai";
+declare const DEFAULT_VOICE_PILL_POSITION: VoicePillPosition;
+declare function clampVoicePillIntensity(intensity?: number): number;
+declare function getVoicePillSpeakerKey(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillSpeakerLabel(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillInitials(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillPosition(position?: VoicePillPosition): VoicePillPosition;
+declare function getVoicePillAriaLabel(props: {
+    speaker?: VoicePillSpeaker;
+    label: string;
+    sub?: string;
+    muted?: boolean;
+}): string;
+declare function getVoicePillPulseStyle(intensity?: number, muted?: boolean): VoicePillStyleVars;
+declare function createVoicePill(props: VoicePillProps): VoicePillAPI;
+
+declare const voicePillTokens: TokenContract;
+declare const voicePillRootStyles = "inline-flex min-w-0 max-w-[min(calc(100vw-2rem),22rem)] items-center gap-3 rounded-full border border-border bg-background px-3 py-2 text-foreground shadow-lg ring-1 ring-border/50 transition-opacity data-[muted=true]:opacity-80";
+declare const voicePillSpeakerStyles = "[--rfr-voice-pill-accent:hsl(var(--primary))] [--rfr-voice-pill-accent-foreground:hsl(var(--primary-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent:hsl(var(--accent-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent-foreground:hsl(var(--accent))] data-[muted=true]:[--rfr-voice-pill-accent:hsl(var(--muted-foreground))]";
+declare const voicePillPositionVariants: (props?: ({
+    position?: "inline" | "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end" | "left-start" | "left-center" | "left-end" | "right-start" | "right-center" | "right-end" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const voicePillAvatarWrapStyles = "relative flex h-10 w-10 shrink-0 items-center justify-center";
+declare const voicePillPulseRingStyles = "pointer-events-none absolute inset-0 rounded-full border border-[var(--rfr-voice-pill-accent)] opacity-[var(--rfr-voice-pill-ring-opacity)] motion-safe:animate-ping motion-reduce:animate-none";
+declare const voicePillAvatarStyles = "relative z-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[var(--rfr-voice-pill-accent)] text-[var(--rfr-voice-pill-accent-foreground)] text-xs font-semibold uppercase";
+declare const voicePillTextStyles = "min-w-0 flex-1";
+declare const voicePillLabelStyles = "block truncate text-sm font-medium leading-tight";
+declare const voicePillSubStyles = "block truncate text-xs leading-tight text-muted-foreground";
+declare const voicePillMuteButtonStyles = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+export { DEFAULT_VOICE_PILL_POSITION, DEFAULT_VOICE_PILL_SPEAKER, type VoicePillAPI, type VoicePillPosition, type VoicePillProps, type VoicePillSpeaker, type VoicePillStyleVars, clampVoicePillIntensity, createVoicePill, getVoicePillAriaLabel, getVoicePillInitials, getVoicePillPosition, getVoicePillPulseStyle, getVoicePillSpeakerKey, getVoicePillSpeakerLabel, voicePillAvatarStyles, voicePillAvatarWrapStyles, voicePillLabelStyles, voicePillMuteButtonStyles, voicePillPositionVariants, voicePillPulseRingStyles, voicePillRootStyles, voicePillSpeakerStyles, voicePillSubStyles, voicePillTextStyles, voicePillTokens };

package/dist/internal/voice-pill/index.d.ts

@@ -0,0 +1,86 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.js';
+
+type VoicePillSpeaker = 'ai' | 'user' | (string & {});
+type VoicePillPosition = 'inline' | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
+interface VoicePillProps {
+    /** Speaker identity used for labels and data-speaker theming */
+    speaker?: VoicePillSpeaker;
+    /** Primary voice status text */
+    label: string;
+    /** Optional secondary status text */
+    sub?: string;
+    /** Voice activity intensity, clamped from 0 to 1 */
+    intensity?: number;
+    /** Whether voice output/input is muted */
+    muted?: boolean;
+    /** Callback for the optional mute toggle */
+    onToggleMute?: () => void;
+    /** Viewport position, or inline for embedding inside another layout */
+    position?: VoicePillPosition;
+}
+interface VoicePillStyleVars {
+    [key: `--${string}`]: string;
+}
+interface VoicePillAPI {
+    /** Display speaker label */
+    speaker: string;
+    /** Normalized key for data-speaker */
+    speakerKey: string;
+    /** Primary label */
+    label: string;
+    /** Secondary label */
+    sub?: string;
+    /** Clamped raw intensity */
+    intensity: number;
+    /** Intensity used for visual animation after muted state is applied */
+    visualIntensity: number;
+    /** Muted state */
+    muted: boolean;
+    /** Viewport position, or inline for embedding inside another layout */
+    position: VoicePillPosition;
+    /** Fallback initials for the speaker avatar */
+    initials: string;
+    /** Invoke the mute callback when provided */
+    toggleMute(): void;
+    /** ARIA props for the live status pill */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the mute toggle */
+    toggleMuteAriaProps: Record<string, unknown>;
+    /** Data attributes reflecting speaker/state */
+    dataAttributes: Record<string, string>;
+    /** CSS custom properties that drive pulse visuals */
+    style: VoicePillStyleVars;
+}
+declare const DEFAULT_VOICE_PILL_SPEAKER = "ai";
+declare const DEFAULT_VOICE_PILL_POSITION: VoicePillPosition;
+declare function clampVoicePillIntensity(intensity?: number): number;
+declare function getVoicePillSpeakerKey(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillSpeakerLabel(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillInitials(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillPosition(position?: VoicePillPosition): VoicePillPosition;
+declare function getVoicePillAriaLabel(props: {
+    speaker?: VoicePillSpeaker;
+    label: string;
+    sub?: string;
+    muted?: boolean;
+}): string;
+declare function getVoicePillPulseStyle(intensity?: number, muted?: boolean): VoicePillStyleVars;
+declare function createVoicePill(props: VoicePillProps): VoicePillAPI;
+
+declare const voicePillTokens: TokenContract;
+declare const voicePillRootStyles = "inline-flex min-w-0 max-w-[min(calc(100vw-2rem),22rem)] items-center gap-3 rounded-full border border-border bg-background px-3 py-2 text-foreground shadow-lg ring-1 ring-border/50 transition-opacity data-[muted=true]:opacity-80";
+declare const voicePillSpeakerStyles = "[--rfr-voice-pill-accent:hsl(var(--primary))] [--rfr-voice-pill-accent-foreground:hsl(var(--primary-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent:hsl(var(--accent-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent-foreground:hsl(var(--accent))] data-[muted=true]:[--rfr-voice-pill-accent:hsl(var(--muted-foreground))]";
+declare const voicePillPositionVariants: (props?: ({
+    position?: "inline" | "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end" | "left-start" | "left-center" | "left-end" | "right-start" | "right-center" | "right-end" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const voicePillAvatarWrapStyles = "relative flex h-10 w-10 shrink-0 items-center justify-center";
+declare const voicePillPulseRingStyles = "pointer-events-none absolute inset-0 rounded-full border border-[var(--rfr-voice-pill-accent)] opacity-[var(--rfr-voice-pill-ring-opacity)] motion-safe:animate-ping motion-reduce:animate-none";
+declare const voicePillAvatarStyles = "relative z-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[var(--rfr-voice-pill-accent)] text-[var(--rfr-voice-pill-accent-foreground)] text-xs font-semibold uppercase";
+declare const voicePillTextStyles = "min-w-0 flex-1";
+declare const voicePillLabelStyles = "block truncate text-sm font-medium leading-tight";
+declare const voicePillSubStyles = "block truncate text-xs leading-tight text-muted-foreground";
+declare const voicePillMuteButtonStyles = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+export { DEFAULT_VOICE_PILL_POSITION, DEFAULT_VOICE_PILL_SPEAKER, type VoicePillAPI, type VoicePillPosition, type VoicePillProps, type VoicePillSpeaker, type VoicePillStyleVars, clampVoicePillIntensity, createVoicePill, getVoicePillAriaLabel, getVoicePillInitials, getVoicePillPosition, getVoicePillPulseStyle, getVoicePillSpeakerKey, getVoicePillSpeakerLabel, voicePillAvatarStyles, voicePillAvatarWrapStyles, voicePillLabelStyles, voicePillMuteButtonStyles, voicePillPositionVariants, voicePillPulseRingStyles, voicePillRootStyles, voicePillSpeakerStyles, voicePillSubStyles, voicePillTextStyles, voicePillTokens };

package/dist/internal/waveform/index.d.cts

@@ -0,0 +1,83 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type WaveformVariant = 'bars' | 'line' | 'rings';
+type WaveformSampleInput = Float32Array | number[];
+type WaveformSource = AnalyserNode | MediaStream | WaveformSampleInput;
+interface WaveformProps {
+    source?: WaveformSource;
+    samples?: WaveformSampleInput;
+    intensity?: number;
+    amplitude?: number;
+    variant?: WaveformVariant;
+    height?: number | string;
+    width?: number | string;
+    barCount?: number;
+    smoothing?: number;
+    color?: string;
+    paused?: boolean;
+}
+interface NormalizedWaveformConfig {
+    variant: WaveformVariant;
+    intensity: number;
+    amplitude: number;
+    height: number | string;
+    width: number | string;
+    barCount: number;
+    smoothing: number;
+    color: string;
+    paused: boolean;
+}
+interface WaveformAPI {
+    config: NormalizedWaveformConfig;
+    samples: Float32Array;
+    ariaProps: Partial<AccessibilityProps>;
+    dataAttributes: Record<'data-variant' | 'data-paused', string>;
+    getSamples: (barCount?: number) => Float32Array;
+}
+declare const DEFAULT_WAVEFORM_BAR_COUNT = 48;
+declare const DEFAULT_WAVEFORM_COLOR = "var(--accent-2)";
+declare const DEFAULT_WAVEFORM_HEIGHT = 80;
+declare const DEFAULT_WAVEFORM_INTENSITY = 1;
+declare const DEFAULT_WAVEFORM_SMOOTHING = 0.8;
+declare function normalizeBarCount(value: number | undefined): number;
+declare function normalizeSmoothing(value: number | undefined): number;
+declare function normalizeIntensity(value: number | undefined): number;
+declare function normalizeWaveformConfig(props?: WaveformProps): NormalizedWaveformConfig;
+declare function isWaveformSampleInput(value: unknown): value is WaveformSampleInput;
+declare function createSilentSamples(count?: number): Float32Array;
+declare function createIntensitySamples(intensity?: number, count?: number, phase?: number): Float32Array;
+declare function normalizeWaveformSamples(input: WaveformSampleInput | undefined, targetCount?: number): Float32Array;
+declare function resampleWaveformSamples(samples: WaveformSampleInput, targetCount: number): Float32Array;
+declare function smoothWaveformSamples(previous: WaveformSampleInput | undefined, next: WaveformSampleInput, smoothing?: number): Float32Array;
+declare function scaleWaveformSamples(samples: WaveformSampleInput, intensity?: number): Float32Array;
+declare function getWaveformPeak(samples: WaveformSampleInput): number;
+declare function toCssDimension(value: number | string | undefined): string | undefined;
+declare function createWaveform(props?: WaveformProps): WaveformAPI;
+
+interface WaveformCanvasSize {
+    width: number;
+    height: number;
+    pixelRatio?: number;
+}
+interface WaveformRenderOptions {
+    variant?: WaveformVariant;
+    color?: string;
+    intensity?: number;
+    amplitude?: number;
+    barCount?: number;
+}
+declare function prepareWaveformCanvas(canvas: HTMLCanvasElement, size: WaveformCanvasSize): CanvasRenderingContext2D | null;
+declare function drawWaveform(context: CanvasRenderingContext2D, samples: WaveformSampleInput, size: WaveformCanvasSize, options?: WaveformRenderOptions): void;
+
+declare const waveformVariants: (props?: ({
+    variant?: "bars" | "line" | "rings" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const waveformCanvasVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { DEFAULT_WAVEFORM_BAR_COUNT, DEFAULT_WAVEFORM_COLOR, DEFAULT_WAVEFORM_HEIGHT, DEFAULT_WAVEFORM_INTENSITY, DEFAULT_WAVEFORM_SMOOTHING, type NormalizedWaveformConfig, type WaveformAPI, type WaveformCanvasSize, type WaveformProps, type WaveformRenderOptions, type WaveformSampleInput, type WaveformSource, type WaveformVariant, createIntensitySamples, createSilentSamples, createWaveform, drawWaveform, getWaveformPeak, isWaveformSampleInput, normalizeBarCount, normalizeIntensity, normalizeSmoothing, normalizeWaveformConfig, normalizeWaveformSamples, prepareWaveformCanvas, resampleWaveformSamples, scaleWaveformSamples, smoothWaveformSamples, toCssDimension, waveformCanvasVariants, waveformVariants };

package/dist/internal/waveform/index.d.ts

@@ -0,0 +1,83 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type WaveformVariant = 'bars' | 'line' | 'rings';
+type WaveformSampleInput = Float32Array | number[];
+type WaveformSource = AnalyserNode | MediaStream | WaveformSampleInput;
+interface WaveformProps {
+    source?: WaveformSource;
+    samples?: WaveformSampleInput;
+    intensity?: number;
+    amplitude?: number;
+    variant?: WaveformVariant;
+    height?: number | string;
+    width?: number | string;
+    barCount?: number;
+    smoothing?: number;
+    color?: string;
+    paused?: boolean;
+}
+interface NormalizedWaveformConfig {
+    variant: WaveformVariant;
+    intensity: number;
+    amplitude: number;
+    height: number | string;
+    width: number | string;
+    barCount: number;
+    smoothing: number;
+    color: string;
+    paused: boolean;
+}
+interface WaveformAPI {
+    config: NormalizedWaveformConfig;
+    samples: Float32Array;
+    ariaProps: Partial<AccessibilityProps>;
+    dataAttributes: Record<'data-variant' | 'data-paused', string>;
+    getSamples: (barCount?: number) => Float32Array;
+}
+declare const DEFAULT_WAVEFORM_BAR_COUNT = 48;
+declare const DEFAULT_WAVEFORM_COLOR = "var(--accent-2)";
+declare const DEFAULT_WAVEFORM_HEIGHT = 80;
+declare const DEFAULT_WAVEFORM_INTENSITY = 1;
+declare const DEFAULT_WAVEFORM_SMOOTHING = 0.8;
+declare function normalizeBarCount(value: number | undefined): number;
+declare function normalizeSmoothing(value: number | undefined): number;
+declare function normalizeIntensity(value: number | undefined): number;
+declare function normalizeWaveformConfig(props?: WaveformProps): NormalizedWaveformConfig;
+declare function isWaveformSampleInput(value: unknown): value is WaveformSampleInput;
+declare function createSilentSamples(count?: number): Float32Array;
+declare function createIntensitySamples(intensity?: number, count?: number, phase?: number): Float32Array;
+declare function normalizeWaveformSamples(input: WaveformSampleInput | undefined, targetCount?: number): Float32Array;
+declare function resampleWaveformSamples(samples: WaveformSampleInput, targetCount: number): Float32Array;
+declare function smoothWaveformSamples(previous: WaveformSampleInput | undefined, next: WaveformSampleInput, smoothing?: number): Float32Array;
+declare function scaleWaveformSamples(samples: WaveformSampleInput, intensity?: number): Float32Array;
+declare function getWaveformPeak(samples: WaveformSampleInput): number;
+declare function toCssDimension(value: number | string | undefined): string | undefined;
+declare function createWaveform(props?: WaveformProps): WaveformAPI;
+
+interface WaveformCanvasSize {
+    width: number;
+    height: number;
+    pixelRatio?: number;
+}
+interface WaveformRenderOptions {
+    variant?: WaveformVariant;
+    color?: string;
+    intensity?: number;
+    amplitude?: number;
+    barCount?: number;
+}
+declare function prepareWaveformCanvas(canvas: HTMLCanvasElement, size: WaveformCanvasSize): CanvasRenderingContext2D | null;
+declare function drawWaveform(context: CanvasRenderingContext2D, samples: WaveformSampleInput, size: WaveformCanvasSize, options?: WaveformRenderOptions): void;
+
+declare const waveformVariants: (props?: ({
+    variant?: "bars" | "line" | "rings" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const waveformCanvasVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { DEFAULT_WAVEFORM_BAR_COUNT, DEFAULT_WAVEFORM_COLOR, DEFAULT_WAVEFORM_HEIGHT, DEFAULT_WAVEFORM_INTENSITY, DEFAULT_WAVEFORM_SMOOTHING, type NormalizedWaveformConfig, type WaveformAPI, type WaveformCanvasSize, type WaveformProps, type WaveformRenderOptions, type WaveformSampleInput, type WaveformSource, type WaveformVariant, createIntensitySamples, createSilentSamples, createWaveform, drawWaveform, getWaveformPeak, isWaveformSampleInput, normalizeBarCount, normalizeIntensity, normalizeSmoothing, normalizeWaveformConfig, normalizeWaveformSamples, prepareWaveformCanvas, resampleWaveformSamples, scaleWaveformSamples, smoothWaveformSamples, toCssDimension, waveformCanvasVariants, waveformVariants };

package/dist/theme.d.cts

@@ -1 +1 @@
-export * from '@refraction-ui/react-theme';
+export * from './internal/react-theme/index.cjs';

package/dist/theme.d.ts

@@ -1 +1 @@
-export * from '@refraction-ui/react-theme';
+export * from './internal/react-theme/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,13 +17,18 @@
       "import": "./dist/theme.js",
       "require": "./dist/theme.cjs"
     },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js",
+      "require": "./dist/form.cjs"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && cp src/styles.css dist/styles.css && node ./scripts/embed-internal-types.mjs",
     "dev": "tsup --watch",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
@@ -33,15 +38,11 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "@monaco-editor/react": ">=4",
     "react": ">=18",
     "react-dom": ">=18",
     "react-hook-form": ">=7.43.0"
   },
   "peerDependenciesMeta": {
-    "@monaco-editor/react": {
-      "optional": true
-    },
     "react-hook-form": {
       "optional": true
     }