@q9labsai/chalk-react 4.1.15 → 4.1.16

package/dist/components/composite/settings-dialog-behavior.d.ts

@@ -0,0 +1,645 @@
+import type React from "react";
+import { type ThemeMode, type ThemePalette, type ThemeSkin, type ThemeTexture } from "../theme";
+import type { BackgroundEffect } from "./BackgroundEffectsPicker";
+export type SettingsSectionId = "audio-video" | "audio" | "video" | "appearance" | "experience";
+export interface SettingsDialogValue {
+    identity: {
+        displayName: string;
+    };
+    join: {
+        videoEnabled: boolean;
+        audioEnabled: boolean;
+    };
+    audio: {
+        selectedInput?: string;
+        selectedOutput?: string;
+        outputVolume: number;
+        noiseSuppression: boolean;
+        echoCancellation: boolean;
+        autoGainControl: boolean;
+    };
+    video: {
+        selectedInput?: string;
+        quality: string;
+    };
+    appearance: {
+        layout: string;
+        theme: "light" | "dark" | "system";
+        skin?: ThemeSkin;
+        palette?: ThemePalette;
+        texture?: ThemeTexture;
+        gradient: "default" | "darker";
+        showFilmstrip: boolean;
+        reducedMotion: boolean;
+        generatedAvatars: boolean;
+        profileGradient: {
+            mode: "auto" | "custom";
+            from?: string;
+            to?: string;
+        };
+        ambientBackground: boolean;
+    };
+    experience: {
+        captions: boolean;
+        compactMode: boolean;
+        showInviteToast: boolean;
+        defaultOpenChat: boolean;
+        defaultOpenParticipants: boolean;
+        defaultOpenTranscription: boolean;
+        autoOpenPictureInPicture: boolean;
+        /** Join, leave, message, hand-raise and reaction cues. */
+        sounds: boolean;
+    };
+}
+type SelectableDevice = Pick<MediaDeviceInfo, "deviceId" | "kind" | "label">;
+export interface SettingsDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    settings: SettingsDialogValue;
+    onUpdateIdentity: (updates: Partial<SettingsDialogValue["identity"]>) => void;
+    onUpdateJoin: (updates: Partial<SettingsDialogValue["join"]>) => void;
+    onUpdateAudio: (updates: Partial<SettingsDialogValue["audio"]>) => void;
+    onUpdateVideo: (updates: Partial<SettingsDialogValue["video"]>) => void;
+    onUpdateAppearance: (updates: Partial<SettingsDialogValue["appearance"]>) => void;
+    onUpdateExperience: (updates: Partial<SettingsDialogValue["experience"]>) => void;
+    enablePictureInPicture?: boolean;
+    isPictureInPictureSupported?: boolean;
+    isPictureInPictureActive?: boolean;
+    onOpenPictureInPicture?: () => Promise<void> | void;
+    enableBackgroundEffects?: boolean;
+    isBackgroundEffectsSupported?: boolean;
+    isApplyingBackgroundEffect?: boolean;
+    backgroundEffects?: readonly BackgroundEffect[];
+    selectedBackgroundEffectId?: string;
+    onSelectBackgroundEffect?: (effectId: string) => void;
+    onUploadBackgroundEffect?: (file: File) => void;
+    audioInputDevices?: readonly SelectableDevice[];
+    audioOutputDevices?: readonly SelectableDevice[];
+    videoInputDevices?: readonly SelectableDevice[];
+    audioLevel?: number;
+    videoTrack?: MediaStreamTrack | null;
+    reducedMotion?: boolean;
+    participantColorSeed?: string;
+    isDarkMode?: boolean;
+    initialSection?: SettingsSectionId;
+}
+interface SettingsSection {
+    readonly id: SettingsSectionId;
+    readonly label: string;
+    readonly description: string;
+    readonly icon: React.ComponentType<{
+        className?: string;
+    }>;
+    readonly keywords: readonly string[];
+}
+export declare const SETTINGS_SECTIONS: readonly [{
+    readonly id: "audio-video";
+    readonly label: "Audio & video";
+    readonly description: "Microphone, speakers, camera";
+    readonly icon: React.ForwardRefExoticComponent<import("../../utils/animated-icons/mic-01").Mic01IconProps & React.RefAttributes<import("../../utils/animated-icons").Mic01IconHandle>>;
+    readonly keywords: readonly ["audio", "video", "mic", "microphone", "speaker", "volume", "noise", "camera", "preview", "background", "blur"];
+}, {
+    readonly id: "appearance";
+    readonly label: "Appearance";
+    readonly description: "Skin, palette, texture, avatars";
+    readonly icon: (props: {
+        key?: import("react").Key | null | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+        children?: import("react").ReactNode | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
+        onChange?: import("react").ChangeEventHandler<SVGSVGElement, Element> | undefined;
+        onChangeCapture?: import("react").ChangeEventHandler<SVGSVGElement, Element> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<SVGSVGElement> | undefined;
+        onBeforeInputCapture?: import("react").InputEventHandler<SVGSVGElement> | undefined;
+        onInput?: import("react").InputEventHandler<SVGSVGElement> | undefined;
+        onInputCapture?: import("react").InputEventHandler<SVGSVGElement> | undefined;
+        onReset?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onResetCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSubmit?: import("react").SubmitEventHandler<SVGSVGElement> | undefined;
+        onSubmitCapture?: import("react").SubmitEventHandler<SVGSVGElement> | undefined;
+        onInvalid?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onInvalidCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onError?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onPause?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onClick?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onDrag?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDrop?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
+        onScroll?: import("react").UIEventHandler<SVGSVGElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<SVGSVGElement> | undefined;
+        onScrollEnd?: import("react").UIEventHandler<SVGSVGElement> | undefined;
+        onScrollEndCapture?: import("react").UIEventHandler<SVGSVGElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<SVGSVGElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<SVGSVGElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<SVGSVGElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<SVGSVGElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: ("false" | "true" | boolean) | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: ("false" | "true" | boolean) | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: ("false" | "true" | boolean) | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: ("false" | "true" | boolean) | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: ("false" | "true" | boolean) | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: ("false" | "true" | boolean) | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: ("false" | "true" | boolean) | undefined;
+        "aria-multiline"?: ("false" | "true" | boolean) | undefined;
+        "aria-multiselectable"?: ("false" | "true" | boolean) | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: ("false" | "true" | boolean) | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: ("false" | "true" | boolean) | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: ("false" | "true" | boolean) | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        className?: string | undefined;
+        color?: string | undefined;
+        height?: number | string | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        max?: number | string | undefined;
+        media?: string | undefined;
+        method?: string | undefined;
+        min?: number | string | undefined;
+        name?: string | undefined;
+        nonce?: string | undefined;
+        part?: string | undefined;
+        slot?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+        target?: string | undefined;
+        type?: string | undefined;
+        width?: number | string | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined;
+        crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+        accentHeight?: number | string | undefined;
+        accumulate?: "none" | "sum" | undefined;
+        additive?: "replace" | "sum" | undefined;
+        alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined;
+        allowReorder?: "no" | "yes" | undefined;
+        alphabetic?: number | string | undefined;
+        amplitude?: number | string | undefined;
+        arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
+        ascent?: number | string | undefined;
+        attributeName?: string | undefined;
+        attributeType?: string | undefined;
+        autoReverse?: ("false" | "true" | boolean) | undefined;
+        azimuth?: number | string | undefined;
+        baseFrequency?: number | string | undefined;
+        baselineShift?: number | string | undefined;
+        baseProfile?: number | string | undefined;
+        bbox?: number | string | undefined;
+        begin?: number | string | undefined;
+        bias?: number | string | undefined;
+        by?: number | string | undefined;
+        calcMode?: number | string | undefined;
+        capHeight?: number | string | undefined;
+        clip?: number | string | undefined;
+        clipPath?: string | undefined;
+        clipPathUnits?: number | string | undefined;
+        clipRule?: number | string | undefined;
+        colorInterpolation?: number | string | undefined;
+        colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined;
+        colorProfile?: number | string | undefined;
+        colorRendering?: number | string | undefined;
+        contentScriptType?: number | string | undefined;
+        contentStyleType?: number | string | undefined;
+        cursor?: number | string | undefined;
+        cx?: number | string | undefined;
+        cy?: number | string | undefined;
+        d?: string | undefined;
+        decelerate?: number | string | undefined;
+        descent?: number | string | undefined;
+        diffuseConstant?: number | string | undefined;
+        direction?: number | string | undefined;
+        display?: number | string | undefined;
+        divisor?: number | string | undefined;
+        dominantBaseline?: "auto" | "use-script" | "no-change" | "reset-size" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "central" | "middle" | "text-after-edge" | "text-before-edge" | "inherit" | undefined;
+        dur?: number | string | undefined;
+        dx?: number | string | undefined;
+        dy?: number | string | undefined;
+        edgeMode?: number | string | undefined;
+        elevation?: number | string | undefined;
+        enableBackground?: number | string | undefined;
+        end?: number | string | undefined;
+        exponent?: number | string | undefined;
+        externalResourcesRequired?: ("false" | "true" | boolean) | undefined;
+        fill?: string | undefined;
+        fillOpacity?: number | string | undefined;
+        fillRule?: "nonzero" | "evenodd" | "inherit" | undefined;
+        filter?: string | undefined;
+        filterRes?: number | string | undefined;
+        filterUnits?: number | string | undefined;
+        floodColor?: number | string | undefined;
+        floodOpacity?: number | string | undefined;
+        focusable?: ("false" | "true" | boolean) | "auto" | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: number | string | undefined;
+        fontSizeAdjust?: number | string | undefined;
+        fontStretch?: number | string | undefined;
+        fontStyle?: number | string | undefined;
+        fontVariant?: number | string | undefined;
+        fontWeight?: number | string | undefined;
+        format?: number | string | undefined;
+        fr?: number | string | undefined;
+        from?: number | string | undefined;
+        fx?: number | string | undefined;
+        fy?: number | string | undefined;
+        g1?: number | string | undefined;
+        g2?: number | string | undefined;
+        glyphName?: number | string | undefined;
+        glyphOrientationHorizontal?: number | string | undefined;
+        glyphOrientationVertical?: number | string | undefined;
+        glyphRef?: number | string | undefined;
+        gradientTransform?: string | undefined;
+        gradientUnits?: string | undefined;
+        hanging?: number | string | undefined;
+        horizAdvX?: number | string | undefined;
+        horizOriginX?: number | string | undefined;
+        href?: string | undefined;
+        ideographic?: number | string | undefined;
+        imageRendering?: number | string | undefined;
+        in2?: number | string | undefined;
+        in?: string | undefined;
+        intercept?: number | string | undefined;
+        k1?: number | string | undefined;
+        k2?: number | string | undefined;
+        k3?: number | string | undefined;
+        k4?: number | string | undefined;
+        k?: number | string | undefined;
+        kernelMatrix?: number | string | undefined;
+        kernelUnitLength?: number | string | undefined;
+        kerning?: number | string | undefined;
+        keyPoints?: number | string | undefined;
+        keySplines?: number | string | undefined;
+        keyTimes?: number | string | undefined;
+        lengthAdjust?: number | string | undefined;
+        letterSpacing?: number | string | undefined;
+        lightingColor?: number | string | undefined;
+        limitingConeAngle?: number | string | undefined;
+        local?: number | string | undefined;
+        markerEnd?: string | undefined;
+        markerHeight?: number | string | undefined;
+        markerMid?: string | undefined;
+        markerStart?: string | undefined;
+        markerUnits?: number | string | undefined;
+        markerWidth?: number | string | undefined;
+        mask?: string | undefined;
+        maskContentUnits?: number | string | undefined;
+        maskUnits?: number | string | undefined;
+        mathematical?: number | string | undefined;
+        mode?: number | string | undefined;
+        numOctaves?: number | string | undefined;
+        offset?: number | string | undefined;
+        opacity?: number | string | undefined;
+        operator?: number | string | undefined;
+        order?: number | string | undefined;
+        orient?: number | string | undefined;
+        orientation?: number | string | undefined;
+        origin?: number | string | undefined;
+        overflow?: number | string | undefined;
+        overlinePosition?: number | string | undefined;
+        overlineThickness?: number | string | undefined;
+        paintOrder?: number | string | undefined;
+        panose1?: number | string | undefined;
+        path?: string | undefined;
+        pathLength?: number | string | undefined;
+        patternContentUnits?: string | undefined;
+        patternTransform?: number | string | undefined;
+        patternUnits?: string | undefined;
+        pointerEvents?: number | string | undefined;
+        points?: string | undefined;
+        pointsAtX?: number | string | undefined;
+        pointsAtY?: number | string | undefined;
+        pointsAtZ?: number | string | undefined;
+        preserveAlpha?: ("false" | "true" | boolean) | undefined;
+        preserveAspectRatio?: string | undefined;
+        primitiveUnits?: number | string | undefined;
+        r?: number | string | undefined;
+        radius?: number | string | undefined;
+        refX?: number | string | undefined;
+        refY?: number | string | undefined;
+        renderingIntent?: number | string | undefined;
+        repeatCount?: number | string | undefined;
+        repeatDur?: number | string | undefined;
+        requiredExtensions?: number | string | undefined;
+        requiredFeatures?: number | string | undefined;
+        restart?: number | string | undefined;
+        result?: string | undefined;
+        rotate?: number | string | undefined;
+        rx?: number | string | undefined;
+        ry?: number | string | undefined;
+        scale?: number | string | undefined;
+        seed?: number | string | undefined;
+        shapeRendering?: number | string | undefined;
+        slope?: number | string | undefined;
+        spacing?: number | string | undefined;
+        specularConstant?: number | string | undefined;
+        specularExponent?: number | string | undefined;
+        speed?: number | string | undefined;
+        spreadMethod?: string | undefined;
+        startOffset?: number | string | undefined;
+        stdDeviation?: number | string | undefined;
+        stemh?: number | string | undefined;
+        stemv?: number | string | undefined;
+        stitchTiles?: number | string | undefined;
+        stopColor?: string | undefined;
+        stopOpacity?: number | string | undefined;
+        strikethroughPosition?: number | string | undefined;
+        strikethroughThickness?: number | string | undefined;
+        string?: number | string | undefined;
+        stroke?: string | undefined;
+        strokeDasharray?: string | number | undefined;
+        strokeDashoffset?: string | number | undefined;
+        strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined;
+        strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined;
+        strokeMiterlimit?: number | string | undefined;
+        strokeOpacity?: number | string | undefined;
+        surfaceScale?: number | string | undefined;
+        systemLanguage?: number | string | undefined;
+        tableValues?: number | string | undefined;
+        targetX?: number | string | undefined;
+        targetY?: number | string | undefined;
+        textAnchor?: "start" | "middle" | "end" | "inherit" | undefined;
+        textDecoration?: number | string | undefined;
+        textLength?: number | string | undefined;
+        textRendering?: number | string | undefined;
+        to?: number | string | undefined;
+        transform?: string | undefined;
+        u1?: number | string | undefined;
+        u2?: number | string | undefined;
+        underlinePosition?: number | string | undefined;
+        underlineThickness?: number | string | undefined;
+        unicode?: number | string | undefined;
+        unicodeBidi?: number | string | undefined;
+        unicodeRange?: number | string | undefined;
+        unitsPerEm?: number | string | undefined;
+        vAlphabetic?: number | string | undefined;
+        values?: string | undefined;
+        vectorEffect?: number | string | undefined;
+        version?: string | undefined;
+        vertAdvY?: number | string | undefined;
+        vertOriginX?: number | string | undefined;
+        vertOriginY?: number | string | undefined;
+        vHanging?: number | string | undefined;
+        vIdeographic?: number | string | undefined;
+        viewBox?: string | undefined;
+        viewTarget?: number | string | undefined;
+        visibility?: number | string | undefined;
+        vMathematical?: number | string | undefined;
+        widths?: number | string | undefined;
+        wordSpacing?: number | string | undefined;
+        writingMode?: number | string | undefined;
+        x1?: number | string | undefined;
+        x2?: number | string | undefined;
+        x?: number | string | undefined;
+        xChannelSelector?: string | undefined;
+        xHeight?: number | string | undefined;
+        xlinkActuate?: string | undefined;
+        xlinkArcrole?: string | undefined;
+        xlinkHref?: string | undefined;
+        xlinkRole?: string | undefined;
+        xlinkShow?: string | undefined;
+        xlinkTitle?: string | undefined;
+        xlinkType?: string | undefined;
+        xmlBase?: string | undefined;
+        xmlLang?: string | undefined;
+        xmlns?: string | undefined;
+        xmlnsXlink?: string | undefined;
+        xmlSpace?: string | undefined;
+        y1?: number | string | undefined;
+        y2?: number | string | undefined;
+        y?: number | string | undefined;
+        yChannelSelector?: string | undefined;
+        z?: number | string | undefined;
+        zoomAndPan?: string | undefined;
+        size?: string | number;
+        strokeWidth?: number;
+        absoluteStrokeWidth?: boolean;
+        altIcon?: import("@hugeicons/react").IconSvgElement;
+        showAlt?: boolean;
+        primaryColor?: string;
+        secondaryColor?: string;
+        disableSecondaryOpacity?: boolean;
+    }) => React.JSX.Element;
+    readonly keywords: readonly ["theme", "skin", "classic", "chalk", "palette", "texture", "paper", "slate", "motion", "dark", "light", "color", "avatar", "facehash", "generated", "initials", "fun"];
+}, {
+    readonly id: "experience";
+    readonly label: "Experience";
+    readonly description: "Picture-in-Picture and device extras";
+    readonly icon: React.ForwardRefExoticComponent<import("../../utils/animated-icons/message-01").Message01IconProps & React.RefAttributes<import("../../utils/animated-icons").Message01IconHandle>>;
+    readonly keywords: readonly ["picture", "picture-in-picture", "pip"];
+}];
+interface SettingsDialogBehaviorOptions {
+    readonly isOpen: boolean;
+    readonly settings: SettingsDialogValue;
+    readonly audioInputDevices: readonly SelectableDevice[];
+    readonly audioOutputDevices: readonly SelectableDevice[];
+    readonly videoInputDevices: readonly SelectableDevice[];
+    readonly reducedMotion: boolean;
+    readonly participantColorSeed?: string;
+    readonly isDarkMode: boolean;
+    readonly initialSection: SettingsSectionId;
+}
+interface SettingsDialogBehavior {
+    readonly disableMotion: boolean;
+    readonly isDesktop: boolean;
+    readonly resolvedSkin: ThemeSkin;
+    readonly resolvedPalette: ThemePalette;
+    readonly resolvedTexture: ThemeTexture;
+    readonly resolvedTheme: ThemeMode;
+    readonly usesDarkPalette: boolean;
+    readonly activeSection: SettingsSectionId;
+    readonly setActiveSection: React.Dispatch<React.SetStateAction<SettingsSectionId>>;
+    readonly isNavOpen: boolean;
+    readonly setIsNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    readonly searchQuery: string;
+    readonly setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+    readonly effectiveAudioInputDevices: readonly SelectableDevice[];
+    readonly effectiveAudioOutputDevices: readonly SelectableDevice[];
+    readonly effectiveVideoInputDevices: readonly SelectableDevice[];
+    readonly settingsChromeVariables: React.CSSProperties;
+    readonly filteredSections: readonly SettingsSection[];
+}
+export declare function useSettingsDialogBehavior({ isOpen, settings, audioInputDevices, audioOutputDevices, videoInputDevices, reducedMotion, participantColorSeed, isDarkMode, initialSection }: SettingsDialogBehaviorOptions): SettingsDialogBehavior;
+export {};
+//# sourceMappingURL=settings-dialog-behavior.d.ts.map