@wallarm-org/design-system 1.29.0 → 1.31.0-rc-fix-filter-input-nested-menu-screenshot.1

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,32 @@
+import type { ButtonHTMLAttributes, FC, HTMLAttributes, Ref } from 'react';
+import { Avatar as ArkAvatar } from '@ark-ui/react/avatar';
+import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
+import { avatarVariants } from './classes';
+export type AvatarStatusChangeDetails = ArkAvatar.StatusChangeDetails;
+type AvatarButtonAttributes = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'type' | 'name' | 'value' | 'form'>;
+interface AvatarBaseProps extends HTMLAttributes<HTMLElement>, VariantProps<typeof avatarVariants>, TestableProps {
+    ref?: Ref<HTMLElement>;
+    onStatusChange?: (details: AvatarStatusChangeDetails) => void;
+}
+type AvatarRootProps = ({
+    /** Root tag. 'button' makes the avatar itself interactive (e.g. inside FileUploadTrigger asChild). */
+    as?: 'span';
+    /** Render the single child element as the root instead of `as`; takes precedence over it. */
+    asChild?: false;
+} & {
+    [K in keyof AvatarButtonAttributes]?: never;
+}) | ({
+    as: 'button';
+    asChild?: false;
+} & AvatarButtonAttributes) | ({
+    as?: 'span' | 'button';
+    asChild: true;
+} & AvatarButtonAttributes);
+export type AvatarProps = AvatarBaseProps & AvatarRootProps;
+/**
+ * A user's photo on a rounded plate, falling back to initials or an icon while the photo loads,
+ * when it fails, or when there is none.
+ */
+export declare const Avatar: FC<AvatarProps>;
+export {};

package/dist/components/Avatar/Avatar.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/Avatar.figma.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Avatar, AvatarFallback, AvatarImage } from "./index.js";
+const AVATAR_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12336-5504';
+code_connect.connect(Avatar, AVATAR_URL, {
+    variant: {
+        Photo: 'On'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Avatar, {
+            children: [
+                /*#__PURE__*/ jsx(AvatarImage, {
+                    src: "/me.png"
+                }),
+                /*#__PURE__*/ jsx(AvatarFallback, {
+                    name: "Ada Lovelace"
+                })
+            ]
+        })
+});
+code_connect.connect(Avatar, AVATAR_URL, {
+    variant: {
+        Photo: 'Off'
+    },
+    example: ()=>/*#__PURE__*/ jsx(Avatar, {
+            children: /*#__PURE__*/ jsx(AvatarFallback, {})
+        })
+});

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { avatarVariants } from "./classes.js";
+const Avatar_Avatar = ({ ref, id, size, as: Tag = 'span', asChild = false, disabled, type, name, value, form, onStatusChange, className, children, 'data-testid': testId, ...props })=>{
+    const role = props.role ?? (props['aria-label'] && !asChild && 'button' !== Tag ? 'img' : void 0);
+    const buttonAttributes = asChild || 'button' === Tag ? Object.fromEntries(Object.entries({
+        disabled,
+        name,
+        value,
+        form
+    }).filter(([, v])=>void 0 !== v)) : {};
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx(Avatar.Root, {
+            "data-slot": "avatar",
+            ...props,
+            ids: id ? {
+                root: id
+            } : void 0,
+            ...buttonAttributes,
+            ref: ref,
+            role: role,
+            ...asChild && type ? {
+                type
+            } : {},
+            "data-testid": testId,
+            onStatusChange: onStatusChange,
+            className: cn(avatarVariants({
+                size
+            }), className),
+            asChild: true,
+            children: asChild ? children : /*#__PURE__*/ jsx(Tag, {
+                type: 'button' === Tag ? type ?? 'button' : void 0,
+                children: children
+            })
+        })
+    });
+};
+Avatar_Avatar.displayName = 'Avatar';
+export { Avatar_Avatar as Avatar };

package/dist/components/Avatar/AvatarFallback.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType, FC, HTMLAttributes, Ref } from 'react';
+import { type SvgIconProps } from '../../icons';
+export interface AvatarFallbackProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Initials are taken from this: first letter of the first and of the last word. */
+    name?: string;
+    /** Shown when there are no children and `name` gives no initials. */
+    icon?: ComponentType<SvgIconProps>;
+}
+/** Shown while the photo loads, when it fails, and when there is none. */
+export declare const AvatarFallback: FC<AvatarFallbackProps>;

package/dist/components/Avatar/AvatarFallback.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+import { UserRound } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { getInitials } from "../../utils/getInitials.js";
+import { useTestId } from "../../utils/testId.js";
+import { avatarFallbackClassNames } from "./classes.js";
+const AvatarFallback = ({ ref, name, icon: Icon = UserRound, className, children, ...props })=>{
+    const testId = useTestId('fallback');
+    const initials = name ? getInitials(name) : '';
+    const showsInitials = null == children && '' !== initials;
+    return /*#__PURE__*/ jsx(Avatar.Fallback, {
+        "aria-hidden": true,
+        ...props,
+        ref: ref,
+        "data-slot": "avatar-fallback",
+        "data-testid": testId,
+        className: cn(avatarFallbackClassNames, showsInitials && 'text-text-primary', className),
+        children: children ?? (initials || /*#__PURE__*/ jsx(Icon, {
+            size: "md"
+        }))
+    });
+};
+AvatarFallback.displayName = 'AvatarFallback';
+export { AvatarFallback };

package/dist/components/Avatar/AvatarImage.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ImgHTMLAttributes, Ref } from 'react';
+export interface AvatarImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'id'> {
+    ref?: Ref<HTMLImageElement>;
+}
+/**
+ * The photo. Always render it — Ark tracks `src` changes on the mounted element — and pass
+ * `src={undefined}` for "no photo". Decorative by default (`alt=''`).
+ */
+export declare const AvatarImage: FC<AvatarImageProps>;

package/dist/components/Avatar/AvatarImage.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { avatarImageClassNames } from "./classes.js";
+const AvatarImage = ({ ref, alt = '', className, ...props })=>{
+    const testId = useTestId('image');
+    return /*#__PURE__*/ jsx(Avatar.Image, {
+        ...props,
+        ref: ref,
+        alt: alt,
+        "data-slot": "avatar-image",
+        "data-testid": testId,
+        className: cn(avatarImageClassNames, className)
+    });
+};
+AvatarImage.displayName = 'AvatarImage';
+export { AvatarImage };

package/dist/components/Avatar/AvatarOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface AvatarOverlayProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Keep it shown regardless of hover — e.g. a `Loader` while the new photo uploads. */
+    visible?: boolean;
+}
+/**
+ * The "change photo" affordance, shown on hover and keyboard focus of an interactive
+ * (`as='button'`) avatar. Over a photo it adds a wash; over the fallback it swaps the icon.
+ */
+export declare const AvatarOverlay: FC<AvatarOverlayProps>;

package/dist/components/Avatar/AvatarOverlay.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { RefreshCcw } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { avatarOverlayClassNames } from "./classes.js";
+const AvatarOverlay = ({ ref, visible = false, className, children, ...props })=>{
+    const testId = useTestId('overlay');
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "aria-hidden": true,
+        "data-slot": "avatar-overlay",
+        "data-visible": visible ? '' : void 0,
+        "data-testid": testId,
+        className: cn(avatarOverlayClassNames, className),
+        children: children ?? /*#__PURE__*/ jsx(RefreshCcw, {
+            size: "md"
+        })
+    });
+};
+AvatarOverlay.displayName = 'AvatarOverlay';
+export { AvatarOverlay };

package/dist/components/Avatar/classes.d.ts

@@ -0,0 +1,6 @@
+export declare const avatarVariants: (props?: ({
+    size?: "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const avatarImageClassNames: string;
+export declare const avatarFallbackClassNames: string;
+export declare const avatarOverlayClassNames: string;

package/dist/components/Avatar/classes.js

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const avatarVariants = cva(cn('group/avatar inline-grid shrink-0 place-items-center overflow-hidden align-middle *:col-start-1 *:row-start-1', 'border border-border-primary bg-states-primary-hover text-icon-primary font-sans font-medium', 'branded:border-border-brand branded:bg-states-brand-hover branded:text-icon-brand', 'has-[>img[data-state=visible]]:border-0', 'hover:not-disabled:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:invisible', 'focus-visible:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:invisible', '[&:has(>[data-slot=avatar-overlay][data-visible])>[data-slot=avatar-fallback]]:invisible', 'enabled:cursor-pointer disabled:cursor-not-allowed', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'), {
+    variants: {
+        size: {
+            xs: 'size-24 rounded-8 text-2xs',
+            sm: 'size-32 rounded-12 text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'sm'
+    }
+});
+const avatarImageClassNames = cn('size-full object-cover data-[state=hidden]:hidden');
+const avatarFallbackClassNames = cn('inline-flex items-center justify-center select-none data-[state=hidden]:hidden');
+const avatarOverlayClassNames = cn('hidden size-full place-items-center text-icon-primary', 'group-hover/avatar:grid group-focus-visible/avatar:grid group-disabled/avatar:not-data-[visible]:hidden', 'data-[visible]:grid', 'group-has-[>img[data-state=visible]]/avatar:bg-component-avatar-overlay');
+export { avatarFallbackClassNames, avatarImageClassNames, avatarOverlayClassNames, avatarVariants };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { Avatar, type AvatarProps, type AvatarStatusChangeDetails } from './Avatar';
+export { AvatarFallback, type AvatarFallbackProps } from './AvatarFallback';
+export { AvatarImage, type AvatarImageProps } from './AvatarImage';
+export { AvatarOverlay, type AvatarOverlayProps } from './AvatarOverlay';

package/dist/components/Avatar/index.js

@@ -0,0 +1,4 @@
+export { Avatar } from "./Avatar.js";
+export { AvatarFallback } from "./AvatarFallback.js";
+export { AvatarImage } from "./AvatarImage.js";
+export { AvatarOverlay } from "./AvatarOverlay.js";

package/dist/components/CodeEditor/CodeEditorContent.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+type CodeEditorContentNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'contentEditable' | 'role' | 'defaultValue'>;
+export interface CodeEditorContentProps extends CodeEditorContentNativeProps, TestableProps {
+    /** Content wrapper element */
+    ref?: Ref<HTMLDivElement>;
+    /** Show the line-number gutter (CodeSnippet's `<CodeSnippetLineNumbers />` equivalent) */
+    lineNumbers?: boolean;
+}
+/**
+ * Editing surface of `CodeEditorRoot`. Loads the CodeMirror engine on mount and
+ * shows the value as static text until it is ready. `data-*`, `aria-*`, `id`,
+ * `title` and `tabIndex` land on the typing surface; `className`, `style`, `ref`
+ * and event handlers stay on this wrapper (events from the editor bubble to it).
+ */
+export declare const CodeEditorContent: FC<CodeEditorContentProps>;
+export {};

package/dist/components/CodeEditor/CodeEditorContent.js

@@ -0,0 +1,197 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useCodeSnippetFrame } from "../CodeSnippet/hooks/index.js";
+import { useCodeEditorContext } from "./CodeEditorContext.js";
+import { codeEditorContentVariants, codeEditorFallbackCodeVariants, codeEditorFallbackGutterVariants, codeEditorFallbackGuttersVariants, codeEditorFallbackLineVariants, codeEditorFallbackVariants, codeEditorHostVariants } from "./classes.js";
+import { loadEngine } from "./lib/loadEngine.js";
+import { PortalOutlet } from "./lib/PortalOutlet.js";
+import { createPortalRegistry } from "./lib/portalRegistry.js";
+import { splitContentProps } from "./lib/splitContentProps.js";
+const ROW_HEIGHT = 20;
+const VERTICAL_PADDING = 16;
+const fallbackGuttersFor = (options)=>{
+    const configs = Object.values(options.lines);
+    const diff = void 0 !== options.original;
+    const { folds } = options;
+    return {
+        stick: diff || configs.some((line)=>null != line.color),
+        folds: void 0 !== folds && !(Array.isArray(folds) && 0 === folds.length),
+        prefix: diff || configs.some((line)=>null != line.prefix)
+    };
+};
+const buildFallbackRows = (value, startingLineNumber, maxHeight)=>{
+    const lines = value.split('\n');
+    const visible = null === maxHeight ? lines : lines.slice(0, Math.max(0, Math.round((maxHeight - VERTICAL_PADDING) / ROW_HEIGHT)));
+    return visible.map((text, index)=>({
+            number: startingLineNumber + index,
+            text
+        }));
+};
+const CodeEditorContent = ({ ref, lineNumbers = false, className, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('content', testIdProp);
+    const fallbackTestId = useTestId('fallback');
+    const fallbackGuttersTestId = useTestId('fallback-gutters');
+    const { options, callbacks, setHandle } = useCodeEditorContext();
+    const { isFullscreen } = useCodeSnippetFrame();
+    const [registry] = useState(createPortalRegistry);
+    const [handle, setLocalHandle] = useState(null);
+    const [loadFailed, setLoadFailed] = useState(false);
+    const hostRef = useRef(null);
+    const { contentAttributes: routedAttributes, wrapperProps } = splitContentProps(props);
+    const attributesKey = JSON.stringify(routedAttributes);
+    const contentAttributes = useMemo(()=>JSON.parse(attributesKey), [
+        attributesKey
+    ]);
+    const engineOptions = useMemo(()=>({
+            ...options,
+            lineNumbers,
+            contentAttributes
+        }), [
+        options,
+        lineNumbers,
+        contentAttributes
+    ]);
+    const optionsRef = useRef(engineOptions);
+    useEffect(()=>{
+        optionsRef.current = engineOptions;
+    }, [
+        engineOptions
+    ]);
+    useEffect(()=>{
+        const host = hostRef.current;
+        if (!host) return;
+        let cancelled = false;
+        let created = null;
+        loadEngine().then((engine)=>{
+            if (cancelled) return;
+            created = engine.createEditor(host, optionsRef.current, {
+                ...callbacks,
+                portals: registry
+            });
+            const mounted = created;
+            flushSync(()=>{
+                setHandle(mounted);
+                setLocalHandle(mounted);
+            });
+        }, (error)=>{
+            if (cancelled) return;
+            console.error('[CodeEditor] Failed to load the editor engine; showing read-only text.', error);
+            setLoadFailed(true);
+        });
+        return ()=>{
+            cancelled = true;
+            if (created) {
+                created.destroy();
+                setHandle(null);
+            }
+            setLocalHandle(null);
+        };
+    }, [
+        callbacks,
+        registry,
+        setHandle
+    ]);
+    useEffect(()=>{
+        handle?.update(engineOptions);
+    }, [
+        handle,
+        engineOptions
+    ]);
+    useEffect(()=>{
+        handle?.view.requestMeasure();
+    }, [
+        handle,
+        isFullscreen
+    ]);
+    const hasAccessibleName = void 0 !== contentAttributes['aria-label'] || void 0 !== contentAttributes['aria-labelledby'];
+    useEffect(()=>{
+        if ('production' !== process.env.NODE_ENV && !hasAccessibleName) console.warn('[CodeEditor] CodeEditorContent has no accessible name. Pass `aria-label` or `aria-labelledby`.');
+    }, [
+        hasAccessibleName
+    ]);
+    const fallbackRows = null === handle ? buildFallbackRows(options.value, options.startingLineNumber, options.maxHeight) : null;
+    const fallbackGutters = fallbackGuttersFor(options);
+    const hasGutter = lineNumbers || fallbackGutters.stick || fallbackGutters.folds || fallbackGutters.prefix;
+    const isDiff = void 0 !== options.original;
+    return /*#__PURE__*/ jsxs("div", {
+        ...wrapperProps,
+        ref: ref,
+        "data-slot": "code-editor-content",
+        "data-testid": testId,
+        "data-ds-suppress-parent-click": "",
+        className: cn(codeEditorContentVariants(), className),
+        children: [
+            fallbackRows && /*#__PURE__*/ jsxs("pre", {
+                "data-testid": fallbackTestId,
+                "aria-busy": loadFailed ? 'false' : 'true',
+                className: codeEditorFallbackVariants(),
+                children: [
+                    hasGutter && /*#__PURE__*/ jsxs("span", {
+                        "aria-hidden": "true",
+                        "data-testid": fallbackGuttersTestId,
+                        className: codeEditorFallbackGuttersVariants(),
+                        children: [
+                            fallbackGutters.stick && /*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'stick'
+                                })
+                            }),
+                            lineNumbers && /*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'lineNumbers'
+                                }),
+                                children: fallbackRows.map((row)=>/*#__PURE__*/ jsx("span", {
+                                        className: codeEditorFallbackLineVariants(),
+                                        children: row.number
+                                    }, row.number))
+                            }),
+                            fallbackGutters.folds && /*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'folds'
+                                })
+                            }),
+                            fallbackGutters.prefix && /*#__PURE__*/ jsxs("span", {
+                                className: codeEditorFallbackGutterVariants({
+                                    column: 'prefix'
+                                }),
+                                children: [
+                                    fallbackRows.map((row)=>/*#__PURE__*/ jsx("span", {
+                                            className: codeEditorFallbackLineVariants(),
+                                            children: isDiff ? null : options.lines[row.number]?.prefix
+                                        }, row.number)),
+                                    isDiff && /*#__PURE__*/ jsx("span", {
+                                        className: "invisible h-0 overflow-hidden",
+                                        children: "+"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("code", {
+                        className: codeEditorFallbackCodeVariants({
+                            hasGutter
+                        }),
+                        children: fallbackRows.map((row)=>/*#__PURE__*/ jsx("span", {
+                                className: codeEditorFallbackLineVariants({
+                                    wrapLines: options.wrapLines
+                                }),
+                                children: row.text
+                            }, row.number))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: hostRef,
+                className: codeEditorHostVariants()
+            }),
+            /*#__PURE__*/ jsx(PortalOutlet, {
+                registry: registry
+            })
+        ]
+    });
+};
+CodeEditorContent.displayName = 'CodeEditorContent';
+export { CodeEditorContent };

package/dist/components/CodeEditor/CodeEditorContext.d.ts

@@ -0,0 +1,17 @@
+import type { EditorHandle, EngineCallbacks, EngineOptions } from './engine/types';
+import type { CodeEditorApi } from './types';
+/** Internal bridge between `CodeEditorRoot` (state owner) and `CodeEditorContent` (engine host). */
+export interface CodeEditorContextValue {
+    /** Engine options owned by Root; Content adds `lineNumbers` and `contentAttributes` */
+    options: Omit<EngineOptions, 'lineNumbers' | 'contentAttributes' | 'maxHeight'> & {
+        maxHeight: number | null;
+    };
+    /** Stable callbacks (same identity for the Root's lifetime) */
+    callbacks: Omit<EngineCallbacks, 'portals'>;
+    /** Content registers the live handle after `createEditor()` and clears it on destroy */
+    setHandle: (handle: EditorHandle | null) => void;
+    /** Stable object delegating to the current handle (no-ops before the engine loads) */
+    api: CodeEditorApi;
+}
+export declare const CodeEditorContext: import("react").Context<CodeEditorContextValue | null>;
+export declare const useCodeEditorContext: () => CodeEditorContextValue;

package/dist/components/CodeEditor/CodeEditorContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const CodeEditorContext = createContext(null);
+const useCodeEditorContext = ()=>{
+    const context = useContext(CodeEditorContext);
+    if (!context) throw new Error('CodeEditor components must be used within CodeEditorRoot');
+    return context;
+};
+export { CodeEditorContext, useCodeEditorContext };

package/dist/components/CodeEditor/CodeEditorRoot.d.ts

@@ -0,0 +1,77 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
+import type { LineConfig } from '../CodeSnippet/CodeSnippetContext';
+import { codeSnippetRootVariants } from '../CodeSnippet/classes';
+import type { CodeEditorApi, CodeEditorCompletionSource, CodeEditorDiagnostic, CodeEditorFolds, CodeEditorLanguage, JsonSchema } from './types';
+type CodeEditorRootNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue' | 'onCopy'>;
+export interface CodeEditorRootProps extends CodeEditorRootNativeProps, TestableProps, VariantProps<typeof codeSnippetRootVariants> {
+    /** Root element, including in fullscreen */
+    ref?: Ref<HTMLDivElement>;
+    /** Controlled document */
+    value?: string;
+    /** Uncontrolled initial document (controlled vs uncontrolled is locked on first render) */
+    defaultValue?: string;
+    /** Fired for user edits only, never for external `value` syncs */
+    onChange?: (value: string) => void;
+    /** Passed verbatim to the syntax adapter; selects the structural parser */
+    language?: CodeEditorLanguage;
+    /**
+     * Document identity: changing it swaps to that document's cached state (undo history,
+     * selection, folds). Requires a controlled `value`: when the id changes, `value` must already
+     * hold that document's text (an uncached id starts from `value`). In uncontrolled mode the new
+     * document would be seeded with the previous document's text.
+     */
+    documentId?: string;
+    /** Focusable, selectable, searchable, copyable — but not editable by the user */
+    readOnly?: boolean;
+    /** Offsets gutter numbers; `lines`, `folds`, `diagnostics` use absolute numbers */
+    startingLineNumber?: number;
+    /**
+     * Per-line configuration keyed by absolute line number (static, see spec D6).
+     * Compared by identity: memoise it (or hoist it to a constant) — a new object
+     * every render reconfigures the lines and gutters on every render.
+     */
+    lines?: Record<number, LineConfig>;
+    /**
+     * Fold regions, or a function re-run after edits; collapsed state is kept by `id`.
+     * Compared by identity: memoise the array or pass a stable function (e.g. `getHttpFolds`) —
+     * an inline array/arrow reconfigures folds on every render and bypasses the re-run debounce.
+     */
+    folds?: CodeEditorFolds;
+    /** Controlled line wrapping */
+    wrapLines?: boolean;
+    /** Uncontrolled initial line wrapping */
+    defaultWrapLines?: boolean;
+    /** Fired when the wrap button toggles wrapping */
+    onWrapLinesChange?: (wrap: boolean) => void;
+    /** Height clamp in rows; auto-renders `CodeSnippetShowMoreButton` unless one is a direct child */
+    maxLines?: number;
+    /** Enables diff mode against this text */
+    original?: string;
+    /** JSON Schema for the document (`json`) or the JSON body (`http`) */
+    schema?: JsonSchema;
+    /**
+     * Consumer completion sources, added after the built-in ones. Compared by identity: a new
+     * array reconfigures autocomplete and closes an open list, so keep it stable (module constant
+     * or `useMemo`).
+     */
+    completions?: CodeEditorCompletionSource[];
+    /** External diagnostics, merged with syntax and schema ones */
+    diagnostics?: CodeEditorDiagnostic[];
+    /** Fired when the merged diagnostics change */
+    onDiagnosticsChange?: (diagnostics: CodeEditorDiagnostic[]) => void;
+    /** Imperative handle */
+    apiRef?: Ref<CodeEditorApi>;
+    /** Nonce for the style tags the editor injects */
+    cspNonce?: string;
+    /** Fired by `CodeSnippetCopyButton` after a copy, with the current document */
+    onCopy?: (value: string) => void;
+    /** Chrome (header, floating actions, show more) and `CodeEditorContent` */
+    children?: ReactNode;
+}
+export declare function CodeEditorRoot({ ref, value: valueProp, defaultValue, onChange, language, documentId, size, readOnly, startingLineNumber, lines, folds, wrapLines: wrapLinesProp, defaultWrapLines, onWrapLinesChange, maxLines, original, schema, completions, diagnostics, onDiagnosticsChange, apiRef, cspNonce, onCopy, className, children, 'data-testid': testId, ...props }: CodeEditorRootProps): import("react").JSX.Element;
+export declare namespace CodeEditorRoot {
+    var displayName: string;
+}
+export {};