@refraction-ui/react 0.18.3 → 0.18.4

package/dist/internal/diff-viewer/index.d.ts

@@ -0,0 +1,118 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.js';
+
+type DiffViewerTheme = 'light' | 'dark';
+type DiffViewMode = 'side-by-side' | 'inline';
+type DiffFileStatus = 'added' | 'modified' | 'deleted' | 'renamed';
+interface DiffFile {
+    /** File path */
+    path: string;
+    /** Change status */
+    status: DiffFileStatus;
+    /** Lines added */
+    additions: number;
+    /** Lines deleted */
+    deletions: number;
+    /** Unified diff content for this file */
+    diff?: string;
+    /** Old path for renamed files */
+    oldPath?: string;
+}
+interface DiffViewerProps {
+    /** Files in this diff */
+    files?: DiffFile[];
+    /** Index of the active file */
+    activeFileIndex?: number;
+    /** View mode */
+    viewMode?: DiffViewMode;
+    /** Theme */
+    theme?: DiffViewerTheme;
+    /** Language for syntax highlighting */
+    language?: string;
+    /** Whether the sidebar is visible */
+    sidebarOpen?: boolean;
+    /** Callback when active file changes */
+    onFileSelect?: (index: number) => void;
+    /** Callback when view mode changes */
+    onViewModeChange?: (mode: DiffViewMode) => void;
+    /** Callback when sidebar toggled */
+    onSidebarToggle?: () => void;
+}
+interface DiffViewerState {
+    activeFileIndex: number;
+    viewMode: DiffViewMode;
+    theme: DiffViewerTheme;
+    language: string;
+    sidebarOpen: boolean;
+    files: DiffFile[];
+}
+interface DiffViewerAPI {
+    /** Current viewer state */
+    state: DiffViewerState;
+    /** ARIA attributes for the root element */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Data attributes for CSS styling hooks */
+    dataAttributes: Record<string, string>;
+    /** Select a file by index */
+    selectFile: (index: number) => void;
+    /** Move to next file */
+    nextFile: () => void;
+    /** Move to previous file */
+    prevFile: () => void;
+    /** Toggle view mode */
+    toggleViewMode: () => void;
+    /** Toggle sidebar */
+    toggleSidebar: () => void;
+    /** Get language label for a file path */
+    getLanguageForFile: (path: string) => string;
+    /** Get human-readable file status icon */
+    getFileStatusIcon: (status: DiffFileStatus) => string;
+    /** Get total additions across all files */
+    totalAdditions: () => number;
+    /** Get total deletions across all files */
+    totalDeletions: () => number;
+}
+/**
+ * Create a headless diff viewer API.
+ *
+ * Manages file selection, view mode, sidebar state, and produces ARIA/data
+ * attributes. The actual rendering (Monaco DiffEditor, custom renderer, etc.)
+ * is handled by framework-specific wrappers.
+ */
+declare function createDiffViewer(props?: DiffViewerProps): DiffViewerAPI;
+
+declare const diffViewerTokens: TokenContract;
+declare const diffViewerVariants: (props?: ({
+    theme?: "light" | "dark" | undefined;
+    fullscreen?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const sidebarVariants: (props?: ({
+    theme?: "light" | "dark" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const sidebarItemVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+    theme?: "light" | "dark" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const tabBarVariants: (props?: ({
+    theme?: "light" | "dark" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const tabVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+    theme?: "light" | "dark" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const statusBarVariants: (props?: ({
+    theme?: "light" | "dark" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DiffFile, type DiffFileStatus, type DiffViewMode, type DiffViewerAPI, type DiffViewerProps, type DiffViewerState, type DiffViewerTheme, createDiffViewer, diffViewerTokens, diffViewerVariants, sidebarItemVariants, sidebarVariants, statusBarVariants, tabBarVariants, tabVariants };

package/dist/internal/react-ai/index.d.cts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { GenerateOptions, AIConfig, AIProvider as AIProvider$1, TTSOptions, TTSConfig, TTSProvider as TTSProvider$1 } from '../ai/index.cjs';
+export { AIProvider as AIProviderInterface, GenerateOptions, RouterFn, TTSOptions, TTSProvider as TTSProviderInterface } from '../ai/index.cjs';
+
+interface AIContextValue {
+    generateText: (prompt: string, opts?: GenerateOptions) => Promise<string>;
+    generateJSON: <T = unknown>(prompt: string, opts?: GenerateOptions) => Promise<T>;
+    providers: string[];
+    isGenerating: boolean;
+}
+interface AIProviderProps extends AIConfig {
+    children: React.ReactNode;
+    /** Pre-register providers by name */
+    providers?: Record<string, AIProvider$1>;
+}
+/**
+ * AIProvider — wraps your app with AI context.
+ *
+ * ```tsx
+ * <AIProvider default="openai" providers={{ openai: myOpenAIProvider }}>
+ *   <App />
+ * </AIProvider>
+ * ```
+ */
+declare function AIProvider({ children, providers: providerMap, ...config }: AIProviderProps): React.FunctionComponentElement<React.ProviderProps<AIContextValue | null>>;
+/**
+ * useAI — access AI generation methods and state.
+ * Must be used within <AIProvider>.
+ */
+declare function useAI(): AIContextValue;
+
+interface TTSContextValue {
+    speak: (text: string, opts?: TTSOptions) => void;
+    stop: () => void;
+    isSpeaking: boolean;
+    providers: string[];
+}
+interface TTSProviderProps extends TTSConfig {
+    children: React.ReactNode;
+    /** Pre-register providers by name */
+    providers?: Record<string, TTSProvider$1>;
+}
+/**
+ * TTSProvider — wraps your app with TTS context.
+ *
+ * ```tsx
+ * <TTSProvider providers={{ browser: myBrowserTTS }}>
+ *   <App />
+ * </TTSProvider>
+ * ```
+ */
+declare function TTSProvider({ children, providers: providerMap, ...config }: TTSProviderProps): React.FunctionComponentElement<React.ProviderProps<TTSContextValue | null>>;
+/**
+ * useTTS — access TTS methods and state.
+ * Must be used within <TTSProvider>.
+ */
+declare function useTTS(): TTSContextValue;
+
+export { type AIContextValue, AIProvider, type AIProviderProps, type TTSContextValue, TTSProvider, type TTSProviderProps, useAI, useTTS };

package/dist/internal/react-ai/index.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { GenerateOptions, AIConfig, AIProvider as AIProvider$1, TTSOptions, TTSConfig, TTSProvider as TTSProvider$1 } from '../ai/index.js';
+export { AIProvider as AIProviderInterface, GenerateOptions, RouterFn, TTSOptions, TTSProvider as TTSProviderInterface } from '../ai/index.js';
+
+interface AIContextValue {
+    generateText: (prompt: string, opts?: GenerateOptions) => Promise<string>;
+    generateJSON: <T = unknown>(prompt: string, opts?: GenerateOptions) => Promise<T>;
+    providers: string[];
+    isGenerating: boolean;
+}
+interface AIProviderProps extends AIConfig {
+    children: React.ReactNode;
+    /** Pre-register providers by name */
+    providers?: Record<string, AIProvider$1>;
+}
+/**
+ * AIProvider — wraps your app with AI context.
+ *
+ * ```tsx
+ * <AIProvider default="openai" providers={{ openai: myOpenAIProvider }}>
+ *   <App />
+ * </AIProvider>
+ * ```
+ */
+declare function AIProvider({ children, providers: providerMap, ...config }: AIProviderProps): React.FunctionComponentElement<React.ProviderProps<AIContextValue | null>>;
+/**
+ * useAI — access AI generation methods and state.
+ * Must be used within <AIProvider>.
+ */
+declare function useAI(): AIContextValue;
+
+interface TTSContextValue {
+    speak: (text: string, opts?: TTSOptions) => void;
+    stop: () => void;
+    isSpeaking: boolean;
+    providers: string[];
+}
+interface TTSProviderProps extends TTSConfig {
+    children: React.ReactNode;
+    /** Pre-register providers by name */
+    providers?: Record<string, TTSProvider$1>;
+}
+/**
+ * TTSProvider — wraps your app with TTS context.
+ *
+ * ```tsx
+ * <TTSProvider providers={{ browser: myBrowserTTS }}>
+ *   <App />
+ * </TTSProvider>
+ * ```
+ */
+declare function TTSProvider({ children, providers: providerMap, ...config }: TTSProviderProps): React.FunctionComponentElement<React.ProviderProps<TTSContextValue | null>>;
+/**
+ * useTTS — access TTS methods and state.
+ * Must be used within <TTSProvider>.
+ */
+declare function useTTS(): TTSContextValue;
+
+export { type AIContextValue, AIProvider, type AIProviderProps, type TTSContextValue, TTSProvider, type TTSProviderProps, useAI, useTTS };

package/dist/internal/react-charts/index.d.cts

@@ -0,0 +1,108 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Margin, Dimensions } from '../charts/index.cjs';
+
+interface ChartProps {
+    width?: number;
+    height?: number;
+    margin?: Partial<Margin>;
+    children?: React.ReactNode;
+}
+declare function Chart({ width, height, margin, children, }: ChartProps): react_jsx_runtime.JSX.Element;
+
+interface BarsProps<T = unknown> {
+    data: T[];
+    x: (d: T) => string;
+    y: (d: T) => number;
+    fill?: string;
+}
+declare function Bars<T>({ data, x, y, fill }: BarsProps<T>): react_jsx_runtime.JSX.Element;
+
+interface LineProps<T = unknown> {
+    data: T[];
+    x: (d: T) => number;
+    y: (d: T) => number;
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+}
+declare function Line<T>({ data, x, y, stroke, strokeWidth, fill, }: LineProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CirclesProps<T = unknown> {
+    data: T[];
+    cx: (d: T) => number;
+    cy: (d: T) => number;
+    r?: number;
+    fill?: string;
+}
+declare function Circles<T>({ data, cx, cy, r, fill, }: CirclesProps<T>): react_jsx_runtime.JSX.Element;
+
+interface XAxisProps {
+    ticks: (number | string)[];
+    scale: (value: number | string) => number;
+    height: number;
+    tickSize?: number;
+}
+declare function XAxis({ ticks, scale, height, tickSize, }: XAxisProps): react_jsx_runtime.JSX.Element;
+
+interface YAxisProps {
+    ticks: (number | string)[];
+    scale: (value: number | string) => number;
+    tickSize?: number;
+}
+declare function YAxis({ ticks, scale, tickSize, }: YAxisProps): react_jsx_runtime.JSX.Element;
+
+interface GradientProps {
+    id: string;
+    from: string;
+    to: string;
+    direction?: 'vertical' | 'horizontal';
+}
+declare function Gradient({ id, from, to, direction, }: GradientProps): react_jsx_runtime.JSX.Element;
+
+interface HistogramProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    bins?: number;
+    fill?: string;
+    margin?: Partial<Margin>;
+}
+declare function Histogram({ data, width, height, bins: binCount, fill, margin, }: HistogramProps): react_jsx_runtime.JSX.Element;
+
+interface ScatterPlotProps<T = unknown> {
+    data: T[];
+    x: (d: T) => number;
+    y: (d: T) => number;
+    width?: number;
+    height?: number;
+    r?: number;
+    fill?: string;
+    margin?: Partial<Margin>;
+}
+declare function ScatterPlot<T>({ data, x, y, width, height, r, fill, margin, }: ScatterPlotProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PieChartProps<T = unknown> {
+    data: T[];
+    value: (d: T) => number;
+    width?: number;
+    height?: number;
+    colors?: string[];
+}
+declare function PieChart<T>({ data, value, width, height, colors, }: PieChartProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ChartContextValue {
+    dimensions: Dimensions;
+    /**
+     * Internal marker: `true` only on the context *default* (i.e. no `<Chart>`
+     * provider above this consumer). `<Chart>` always supplies a value without
+     * this flag. Used purely to detect the silent-default footgun — never read
+     * for rendering, and stripped from the public type surface.
+     *
+     * @internal
+     */
+    __isDefault?: boolean;
+}
+declare const ChartContext: React.Context<ChartContextValue>;
+
+export { Bars, type BarsProps, Chart, ChartContext, type ChartContextValue, type ChartProps, Circles, type CirclesProps, Gradient, type GradientProps, Histogram, type HistogramProps, Line, type LineProps, PieChart, type PieChartProps, ScatterPlot, type ScatterPlotProps, XAxis, type XAxisProps, YAxis, type YAxisProps };

package/dist/internal/react-charts/index.d.ts

@@ -0,0 +1,108 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Margin, Dimensions } from '../charts/index.js';
+
+interface ChartProps {
+    width?: number;
+    height?: number;
+    margin?: Partial<Margin>;
+    children?: React.ReactNode;
+}
+declare function Chart({ width, height, margin, children, }: ChartProps): react_jsx_runtime.JSX.Element;
+
+interface BarsProps<T = unknown> {
+    data: T[];
+    x: (d: T) => string;
+    y: (d: T) => number;
+    fill?: string;
+}
+declare function Bars<T>({ data, x, y, fill }: BarsProps<T>): react_jsx_runtime.JSX.Element;
+
+interface LineProps<T = unknown> {
+    data: T[];
+    x: (d: T) => number;
+    y: (d: T) => number;
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+}
+declare function Line<T>({ data, x, y, stroke, strokeWidth, fill, }: LineProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CirclesProps<T = unknown> {
+    data: T[];
+    cx: (d: T) => number;
+    cy: (d: T) => number;
+    r?: number;
+    fill?: string;
+}
+declare function Circles<T>({ data, cx, cy, r, fill, }: CirclesProps<T>): react_jsx_runtime.JSX.Element;
+
+interface XAxisProps {
+    ticks: (number | string)[];
+    scale: (value: number | string) => number;
+    height: number;
+    tickSize?: number;
+}
+declare function XAxis({ ticks, scale, height, tickSize, }: XAxisProps): react_jsx_runtime.JSX.Element;
+
+interface YAxisProps {
+    ticks: (number | string)[];
+    scale: (value: number | string) => number;
+    tickSize?: number;
+}
+declare function YAxis({ ticks, scale, tickSize, }: YAxisProps): react_jsx_runtime.JSX.Element;
+
+interface GradientProps {
+    id: string;
+    from: string;
+    to: string;
+    direction?: 'vertical' | 'horizontal';
+}
+declare function Gradient({ id, from, to, direction, }: GradientProps): react_jsx_runtime.JSX.Element;
+
+interface HistogramProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    bins?: number;
+    fill?: string;
+    margin?: Partial<Margin>;
+}
+declare function Histogram({ data, width, height, bins: binCount, fill, margin, }: HistogramProps): react_jsx_runtime.JSX.Element;
+
+interface ScatterPlotProps<T = unknown> {
+    data: T[];
+    x: (d: T) => number;
+    y: (d: T) => number;
+    width?: number;
+    height?: number;
+    r?: number;
+    fill?: string;
+    margin?: Partial<Margin>;
+}
+declare function ScatterPlot<T>({ data, x, y, width, height, r, fill, margin, }: ScatterPlotProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PieChartProps<T = unknown> {
+    data: T[];
+    value: (d: T) => number;
+    width?: number;
+    height?: number;
+    colors?: string[];
+}
+declare function PieChart<T>({ data, value, width, height, colors, }: PieChartProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ChartContextValue {
+    dimensions: Dimensions;
+    /**
+     * Internal marker: `true` only on the context *default* (i.e. no `<Chart>`
+     * provider above this consumer). `<Chart>` always supplies a value without
+     * this flag. Used purely to detect the silent-default footgun — never read
+     * for rendering, and stripped from the public type surface.
+     *
+     * @internal
+     */
+    __isDefault?: boolean;
+}
+declare const ChartContext: React.Context<ChartContextValue>;
+
+export { Bars, type BarsProps, Chart, ChartContext, type ChartContextValue, type ChartProps, Circles, type CirclesProps, Gradient, type GradientProps, Histogram, type HistogramProps, Line, type LineProps, PieChart, type PieChartProps, ScatterPlot, type ScatterPlotProps, XAxis, type XAxisProps, YAxis, type YAxisProps };

package/dist/internal/react-command-input/index.d.cts

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes } from 'react';
+import { Trigger } from '../command-input/index.cjs';
+
+interface CommandInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    triggers?: Trigger[];
+    renderPopover?: (props: {
+        isOpen: boolean;
+        trigger: string;
+        search: string;
+        close: () => void;
+        position: {
+            top: number;
+            left: number;
+        };
+    }) => React.ReactNode;
+}
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CommandInput, type CommandInputProps };

package/dist/internal/react-command-input/index.d.ts

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes } from 'react';
+import { Trigger } from '../command-input/index.js';
+
+interface CommandInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    triggers?: Trigger[];
+    renderPopover?: (props: {
+        isOpen: boolean;
+        trigger: string;
+        search: string;
+        close: () => void;
+        position: {
+            top: number;
+            left: number;
+        };
+    }) => React.ReactNode;
+}
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CommandInput, type CommandInputProps };

package/dist/internal/react-diff-viewer/index.d.cts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { DiffFile, DiffViewerTheme, DiffViewMode } from '../diff-viewer/index.cjs';
+export { DiffFile, DiffFileStatus, DiffViewMode, DiffViewerAPI, DiffViewerState, DiffViewerTheme, createDiffViewer, diffViewerTokens, diffViewerVariants, sidebarItemVariants, sidebarVariants, statusBarVariants, tabBarVariants, tabVariants } from '../diff-viewer/index.cjs';
+
+interface DiffViewerProps {
+    /** Files in this diff */
+    files: DiffFile[];
+    /** Original file content (left side) */
+    original?: string;
+    /** Modified file content (right side) */
+    modified?: string;
+    /** Language for syntax highlighting (auto-detected from file if omitted) */
+    language?: string;
+    /** Monaco theme name */
+    monacoTheme?: string;
+    /** Color theme */
+    theme?: DiffViewerTheme;
+    /** View mode */
+    viewMode?: DiffViewMode;
+    /** Whether to show the file sidebar */
+    showSidebar?: boolean;
+    /** Whether to show the tab bar */
+    showTabs?: boolean;
+    /** Whether to show the status bar */
+    showStatusBar?: boolean;
+    /** Sidebar width in pixels */
+    sidebarWidth?: number;
+    /** Active file index */
+    activeFileIndex?: number;
+    /** Called when the active file changes */
+    onFileSelect?: (index: number) => void;
+    /** Called when view mode changes */
+    onViewModeChange?: (mode: DiffViewMode) => void;
+    /** Title shown in the status bar */
+    statusBarTitle?: string;
+    /** Status text shown in the status bar */
+    statusBarStatus?: string;
+    /** Additional class name */
+    className?: string;
+    /** Monaco DiffEditor options override */
+    editorOptions?: Record<string, unknown>;
+}
+declare const DiffViewer: React.ForwardRefExoticComponent<DiffViewerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DiffViewer, type DiffViewerProps };

package/dist/internal/react-diff-viewer/index.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { DiffFile, DiffViewerTheme, DiffViewMode } from '../diff-viewer/index.js';
+export { DiffFile, DiffFileStatus, DiffViewMode, DiffViewerAPI, DiffViewerState, DiffViewerTheme, createDiffViewer, diffViewerTokens, diffViewerVariants, sidebarItemVariants, sidebarVariants, statusBarVariants, tabBarVariants, tabVariants } from '../diff-viewer/index.js';
+
+interface DiffViewerProps {
+    /** Files in this diff */
+    files: DiffFile[];
+    /** Original file content (left side) */
+    original?: string;
+    /** Modified file content (right side) */
+    modified?: string;
+    /** Language for syntax highlighting (auto-detected from file if omitted) */
+    language?: string;
+    /** Monaco theme name */
+    monacoTheme?: string;
+    /** Color theme */
+    theme?: DiffViewerTheme;
+    /** View mode */
+    viewMode?: DiffViewMode;
+    /** Whether to show the file sidebar */
+    showSidebar?: boolean;
+    /** Whether to show the tab bar */
+    showTabs?: boolean;
+    /** Whether to show the status bar */
+    showStatusBar?: boolean;
+    /** Sidebar width in pixels */
+    sidebarWidth?: number;
+    /** Active file index */
+    activeFileIndex?: number;
+    /** Called when the active file changes */
+    onFileSelect?: (index: number) => void;
+    /** Called when view mode changes */
+    onViewModeChange?: (mode: DiffViewMode) => void;
+    /** Title shown in the status bar */
+    statusBarTitle?: string;
+    /** Status text shown in the status bar */
+    statusBarStatus?: string;
+    /** Additional class name */
+    className?: string;
+    /** Monaco DiffEditor options override */
+    editorOptions?: Record<string, unknown>;
+}
+declare const DiffViewer: React.ForwardRefExoticComponent<DiffViewerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DiffViewer, type DiffViewerProps };

package/dist/internal/react-location-selector/index.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface LocationSelectorProps {
+    defaultCountry?: string;
+    defaultLanguage?: string;
+    onCountryChange?: (country: string) => void;
+    onLanguageChange?: (language: string) => void;
+    className?: string;
+}
+declare function LocationSelector({ defaultCountry, defaultLanguage, onCountryChange, onLanguageChange, className, }: LocationSelectorProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+export { LocationSelector, type LocationSelectorProps };

package/dist/internal/react-location-selector/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface LocationSelectorProps {
+    defaultCountry?: string;
+    defaultLanguage?: string;
+    onCountryChange?: (country: string) => void;
+    onLanguageChange?: (language: string) => void;
+    className?: string;
+}
+declare function LocationSelector({ defaultCountry, defaultLanguage, onCountryChange, onLanguageChange, className, }: LocationSelectorProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+export { LocationSelector, type LocationSelectorProps };

package/dist/theme.cjs

@@ -286,6 +286,16 @@ var icons = {
 };
 function ThemeToggle({ className, variant = "segmented" }) {
   const { mode, setMode } = useTheme();
+  const [open, setOpen] = React2__namespace.useState(false);
+  const ref = React2__namespace.useRef(null);
+  React2__namespace.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
   if (variant === "segmented") {
     return React2__namespace.createElement(
       "div",
@@ -307,16 +317,6 @@ function ThemeToggle({ className, variant = "segmented" }) {
       )
     );
   }
-  const [open, setOpen] = React2__namespace.useState(false);
-  const ref = React2__namespace.useRef(null);
-  React2__namespace.useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
   const currentIcon = modes.find((m) => m.value === mode)?.icon ?? "monitor";
   return React2__namespace.createElement(
     "div",