diff --git a/.gitattributes b/.gitattributes index 804d82aac9..bcfd78b80a 100644 --- a/.gitattributes +++ b/.gitattributes @@ -31,6 +31,10 @@ sdk/python/** linguist-generated packages/nemo_platform_ext/src/nemo_platform_ext/cli/commands/api/** linguist-generated # Built plugin web bundles (vite output, shipped in the wheel) plugins/*/src/*/web/dist/** linguist-generated +# Rolled-up Studio plugin surface types (pnpm --filter @nemo/common types:plugin) +web/packages/common/plugin-types/** linguist-generated +# Generated Studio stylesheet +web/packages/studio/src/generated/** linguist-generated # Generated license files third_party/osv-licenses*.json linguist-generated third_party/requirements*.txt linguist-generated diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 9340e8d353..ccda608fc0 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -1672,6 +1672,38 @@ jobs: - name: Typecheck web packages against regenerated SDK run: pnpm run --recursive --parallel --if-present typecheck + web-plugin-types: + name: Web plugin surface types check + needs: [changes] + if: > + !cancelled() && ( + github.event_name == 'workflow_dispatch' || + needs.changes.outputs.web-studio == 'true' + ) + runs-on: ubuntu-latest + defaults: + run: + working-directory: web + shell: bash + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3 + with: + persist-credentials: false + - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0 + with: + node-version-file: .nvmrc + - name: Install pnpm via corepack + run: npm i -g corepack@0.31.0 && corepack enable pnpm + - name: Install dependencies + run: pnpm install --frozen-lockfile + - name: Regenerate the plugin surface types + run: pnpm --filter @nemo/common types:plugin + # Out-of-tree plugins vendor this file, so a stale copy types them against + # a surface that no longer exists — and still compiles, which is the whole + # problem. Fail the change that moved the surface, not the plugin later. + - name: Check the committed artifact is up to date + run: git diff --exit-code -- packages/common/plugin-types + web-studio-deps: name: Web studio deps check needs: [changes] @@ -2042,6 +2074,7 @@ jobs: - web-format - web-lint - web-sdk-gen + - web-plugin-types - web-studio-deps - web-studio-e2e - opa-policy-test diff --git a/plugins/example-plugin/web/AGENTS.md b/plugins/example-plugin/web/AGENTS.md index ed8f9874a5..0200fcea6c 100644 --- a/plugins/example-plugin/web/AGENTS.md +++ b/plugins/example-plugin/web/AGENTS.md @@ -100,6 +100,25 @@ import { AssistantChat, StudioDataView, useStudioDataViewState } from '@nemo/com - **Types come from source**, via `paths` in `tsconfig.json`; `@nemo/common` is unpublished, so there is nothing to install. `src/env.d.ts` declares the `*.css` side-effect imports those sources carry. +- **Out-of-tree plugins vendor a generated `.d.ts` instead.** A plugin living in + its own repository can't use `paths` into these sources — resolving them needs + this workspace's `node_modules`, including the unpublished `@nemo/sdk`. The + whole surface is rolled up into `packages/common/plugin-types/plugin.d.ts`, + which is committed here; a plugin repo copies that file in and points its + `paths` at it. Whatever the rolled-up file still imports, the consumer has to + resolve — check the `import` lines at the top of it rather than assuming this + list is current. Published packages (`class-variance-authority`, + `@assistant-ui/react` once the chat surface lands) are plain type-only + devDependencies. Only `@nemo/sdk/generated/platform/schema` needs a local stub, + because it is unpublished; it contributes `PlatformJobLog` and + `PlatformJobStatus`, reached solely through `LogViewer` and the job-status + constants, so a dozen structural lines cover it. +- **Regenerate with `pnpm --filter @nemo/common types:plugin` when you change + `plugin.ts`.** The `web-plugin-types` CI job regenerates and fails on a diff, + so the artifact can't drift from the surface it describes. It can still drift + from a plugin's *copy* — nothing in this repo knows about those — and a stale + copy compiles happily against a surface that no longer exists, so refresh it + deliberately when the surface moves. - **CSS is already loaded.** The vendor build stubs stylesheet imports because Studio bundles the same files through its own graph. A plugin adds no CSS. - **`useStudioDataViewState` syncs to URL search params** on Studio's shared diff --git a/web/.prettierignore b/web/.prettierignore index d86eebcc51..2ac5e307cc 100644 --- a/web/.prettierignore +++ b/web/.prettierignore @@ -14,3 +14,6 @@ packages/**/playwright-report/ # Ignore generated style packages/studio/src/generated/* + +# Rolled-up plugin surface types; formatting it breaks the CI drift check +packages/common/plugin-types/ diff --git a/web/eslint.config.js b/web/eslint.config.js index 8e0285dfba..9055ee99c9 100644 --- a/web/eslint.config.js +++ b/web/eslint.config.js @@ -105,6 +105,7 @@ const ignores = [ `${pathPrefix}packages/studio/test-results`, `${pathPrefix}packages/studio/.test-reports`, `${pathPrefix}packages/sdk/generated/**`, + `${pathPrefix}packages/common/plugin-types/**`, `${pathPrefix}packages/storybook/public/mockServiceWorker.js`, `${pathPrefix}demo-notebook/**`, ]; diff --git a/web/packages/common/package.json b/web/packages/common/package.json index 3eca4d17f3..1f42b48174 100644 --- a/web/packages/common/package.json +++ b/web/packages/common/package.json @@ -16,6 +16,7 @@ "test:ci": "vitest run --coverage", "test:watch": "vitest watch", "test:once": "vitest --run", + "types:plugin": "tsx scripts/build-plugin-types.ts", "typecheck": "tsc --noEmit" }, "peerDependencies": { @@ -57,6 +58,8 @@ "p-limit": "catalog:", "react-dropzone": "catalog:", "react-hook-form": "catalog:", + "rolldown": "^1.2.2", + "rolldown-plugin-dts": "^0.28.2", "tsx": "catalog:", "typescript": "catalog:", "vite": "catalog:", diff --git a/web/packages/common/plugin-types/plugin.d.ts b/web/packages/common/plugin-types/plugin.d.ts new file mode 100644 index 0000000000..6117b72558 --- /dev/null +++ b/web/packages/common/plugin-types/plugin.d.ts @@ -0,0 +1,10688 @@ +// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. +// SPDX-License-Identifier: Apache-2.0 +import * as React$2 from "react"; +import React$1, { CSSProperties, ChangeEvent, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, ElementType, FC, ForwardRefExoticComponent, JSX as JSX$1, JSXElementConstructor, MouseEventHandler, PropsWithChildren, ReactElement, ReactNode, RefAttributes, RefObject, SVGProps } from "react"; +import { ThreadMessageLike, ThreadPrimitive } from "@assistant-ui/react"; +import { PlatformJobLog, PlatformJobStatus, PromptData } from "@nemo/sdk/generated/platform/schema"; +import { VariantProps } from "class-variance-authority"; +//#endregion +//#region src/components/AccessibleTitle/index.d.ts +interface AccessibleTitleProps { + title?: string; +} +/** + * AccessibleTitle is a small wrapper component that updates the document title, which + * both makes it easier to keep track of if you have many tabs open, and also makes route + * changes audible to screen readers. + */ +export declare const AccessibleTitle: FC>; +//#endregion +//#region ../../node_modules/.pnpm/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts +// ## Interfaces +/** + * Info associated with nodes by the ecosystem. + * + * This space is guaranteed to never be specified by unist or specifications + * implementing unist. + * But you can use it in utilities and plugins to store data. + * + * This type can be augmented to register custom data. + * For example: + * + * ```ts + * declare module 'unist' { + * interface Data { + * // `someNode.data.myId` is typed as `number | undefined` + * myId?: number | undefined + * } + * } + * ``` + */ +interface Data$1 {} +/** + * One place in a source file. + */ +interface Point { + /** + * Line in a source file (1-indexed integer). + */ + line: number; + /** + * Column in a source file (1-indexed integer). + */ + column: number; + /** + * Character in a source file (0-indexed integer). + */ + offset?: number | undefined; +} +/** + * Position of a node in a source document. + * + * A position is a range between two points. + */ +interface Position { + /** + * Place of the first character of the parsed source region. + */ + start: Point; + /** + * Place of the first character after the parsed source region. + */ + end: Point; +} +/** + * Abstract unist node. + * + * The syntactic unit in unist syntax trees are called nodes. + * + * This interface is supposed to be extended. + * If you can use {@link Literal} or {@link Parent}, you should. + * But for example in markdown, a `thematicBreak` (`***`), is neither literal + * nor parent, but still a node. + */ +interface Node$1 { + /** + * Node type. + */ + type: string; + /** + * Info from the ecosystem. + */ + data?: Data$1 | undefined; + /** + * Position of a node in a source document. + * + * Nodes that are generated (not in the original source document) must not + * have a position. + */ + position?: Position | undefined; +} +//#endregion +//#region ../../node_modules/.pnpm/@types+hast@3.0.4/node_modules/@types/hast/index.d.ts +// ## Interfaces +/** + * Info associated with hast nodes by the ecosystem. + * + * This space is guaranteed to never be specified by unist or hast. + * But you can use it in utilities and plugins to store data. + * + * This type can be augmented to register custom data. + * For example: + * + * ```ts + * declare module 'hast' { + * interface Data { + * // `someNode.data.myId` is typed as `number | undefined` + * myId?: number | undefined + * } + * } + * ``` + */ +interface Data extends Data$1 {} +/** + * Info associated with an element. + */ +interface Properties { + [PropertyName: string]: boolean | number | string | null | undefined | Array; +} +// ## Content maps +/** + * Union of registered hast nodes that can occur in {@link Element}. + * + * To register mote custom hast nodes, add them to {@link ElementContentMap}. + * They will be automatically added here. + */ +type ElementContent = ElementContentMap[keyof ElementContentMap]; +/** + * Registry of all hast nodes that can occur as children of {@link Element}. + * + * For a union of all {@link Element} children, see {@link ElementContent}. + */ +interface ElementContentMap { + comment: Comment; + element: Element$1; + text: Text$1; +} +/** + * Union of registered hast nodes that can occur in {@link Root}. + * + * To register custom hast nodes, add them to {@link RootContentMap}. + * They will be automatically added here. + */ +type RootContent = RootContentMap[keyof RootContentMap]; +/** + * Registry of all hast nodes that can occur as children of {@link Root}. + * + * > 👉 **Note**: {@link Root} does not need to be an entire document. + * > it can also be a fragment. + * + * For a union of all {@link Root} children, see {@link RootContent}. + */ +interface RootContentMap { + comment: Comment; + doctype: Doctype; + element: Element$1; + text: Text$1; +} +// ## Abstract nodes +/** + * Abstract hast node. + * + * This interface is supposed to be extended. + * If you can use {@link Literal} or {@link Parent}, you should. + * But for example in HTML, a `Doctype` is neither literal nor parent, but + * still a node. + * + * To register custom hast nodes, add them to {@link RootContentMap} and other + * places where relevant (such as {@link ElementContentMap}). + * + * For a union of all registered hast nodes, see {@link Nodes}. + */ +interface Node extends Node$1 { + /** + * Info from the ecosystem. + */ + data?: Data | undefined; +} +/** + * Abstract hast node that contains the smallest possible value. + * + * This interface is supposed to be extended if you make custom hast nodes. + * + * For a union of all registered hast literals, see {@link Literals}. + */ +interface Literal extends Node { + /** + * Plain-text value. + */ + value: string; +} +/** + * Abstract hast node that contains other hast nodes (*children*). + * + * This interface is supposed to be extended if you make custom hast nodes. + * + * For a union of all registered hast parents, see {@link Parents}. + */ +interface Parent extends Node { + /** + * List of children. + */ + children: RootContent[]; +} +// ## Concrete nodes +/** + * HTML comment. + */ +interface Comment extends Literal { + /** + * Node type of HTML comments in hast. + */ + type: "comment"; + /** + * Data associated with the comment. + */ + data?: CommentData | undefined; +} +/** + * Info associated with hast comments by the ecosystem. + */ +interface CommentData extends Data {} +/** + * HTML document type. + */ +interface Doctype extends Node$1 { + /** + * Node type of HTML document types in hast. + */ + type: "doctype"; + /** + * Data associated with the doctype. + */ + data?: DoctypeData | undefined; +} +/** + * Info associated with hast doctypes by the ecosystem. + */ +interface DoctypeData extends Data {} +/** + * HTML element. + */ +interface Element$1 extends Parent { + /** + * Node type of elements. + */ + type: "element"; + /** + * Tag name (such as `'body'`) of the element. + */ + tagName: string; + /** + * Info associated with the element. + */ + properties: Properties; + /** + * Children of element. + */ + children: ElementContent[]; + /** + * When the `tagName` field is `'template'`, a `content` field can be + * present. + */ + content?: Root$1 | undefined; + /** + * Data associated with the element. + */ + data?: ElementData | undefined; +} +/** + * Info associated with hast elements by the ecosystem. + */ +interface ElementData extends Data {} +/** + * Document fragment or a whole document. + * + * Should be used as the root of a tree and must not be used as a child. + * + * Can also be used as the value for the content field on a `'template'` element. + */ +interface Root$1 extends Parent { + /** + * Node type of hast root. + */ + type: "root"; + /** + * Children of root. + */ + children: RootContent[]; + /** + * Data associated with the hast root. + */ + data?: RootData | undefined; +} +/** + * Info associated with hast root nodes by the ecosystem. + */ +interface RootData extends Data {} +/** + * HTML character data (plain text). + */ +interface Text$1 extends Literal { + /** + * Node type of HTML character data (plain text) in hast. + */ + type: "text"; + /** + * Data associated with the text. + */ + data?: TextData | undefined; +} +/** + * Info associated with hast texts by the ecosystem. + */ +interface TextData extends Data {} +//#endregion +//#region ../../node_modules/.pnpm/mdast-util-to-hast@13.2.1/node_modules/mdast-util-to-hast/index.d.ts +/** + * Raw string of HTML embedded into HTML AST. + */ +interface Raw extends Literal { + /** + * Node type of raw. + */ + type: 'raw'; + /** + * Data associated with the hast raw. + */ + data?: RawData | undefined; +} +/** + * Info associated with hast raw nodes by the ecosystem. + */ +interface RawData extends Data {} +// Register nodes in content. +declare module 'hast' { + interface ElementData { + /** + * Custom info relating to the node, if `` in `
`.
+     *
+     * Defined by `mdast-util-to-hast` (`remark-rehype`).
+     */
+    meta?: string | null | undefined;
+  }
+  interface ElementContentMap {
+    /**
+     * Raw string of HTML embedded into HTML AST.
+     */
+    raw: Raw;
+  }
+  interface RootContentMap {
+    /**
+     * Raw string of HTML embedded into HTML AST.
+     */
+    raw: Raw;
+  }
+}
+// Register data on mdast.
+declare module 'mdast' {
+  interface Data {
+    /**
+     * Field supported by `mdast-util-to-hast` to signal that a node should
+     * result in something with these children.
+     *
+     * When this is defined, when a parent is created, these children will
+     * be used.
+     */
+    hChildren?: ElementContent[] | undefined;
+    /**
+     * Field supported by `mdast-util-to-hast` to signal that a node should
+     * result in a particular element, instead of its default behavior.
+     *
+     * When this is defined, an element with the given tag name is created.
+     * For example, when setting `hName` to `'b'`, a `` element is created.
+     */
+    hName?: string | undefined;
+    /**
+     * Field supported by `mdast-util-to-hast` to signal that a node should
+     * result in an element with these properties.
+     *
+     * When this is defined, when an element is created, these properties will
+     * be used.
+     */
+    hProperties?: Properties | undefined;
+  }
+}
+//#endregion
+//#region ../../node_modules/.pnpm/react-markdown@9.1.0_@types+react@19.2.14_react@19.2.7/node_modules/react-markdown/lib/index.d.ts
+/**
+ * Extra fields we pass.
+ */
+type ExtraProps = {
+  /**
+   * passed when `passNode` is on.
+   */
+  node?: Element$1 | undefined;
+};
+/**
+ * Map tag names to components.
+ */
+type Components$1 = { [Key in Extract]?: ElementType & ExtraProps>; };
+//#endregion
+//#region ../../node_modules/.pnpm/react-markdown@9.1.0_@types+react@19.2.14_react@19.2.7/node_modules/react-markdown/index.d.ts
+type Components = Components$1;
+//#endregion
+//#region src/components/Chat/MessageContent/types.d.ts
+interface MarkdownTableOptions {
+  expandableCells?: boolean;
+}
+interface MessageContentProps {
+  content?: string | null;
+  markdownLinkComponent?: Components['a'];
+  markdownTableOptions?: MarkdownTableOptions;
+  renderAsMarkdown?: boolean;
+}
+declare namespace shared_d_exports {
+  export { AllModels, ChatModel, ComparisonFilter, CompoundFilter, ErrorObject, FunctionDefinition, FunctionParameters, Metadata, Reasoning, ReasoningEffort, ResponseFormatJSONObject, ResponseFormatJSONSchema, ResponseFormatText, ResponsesModel };
+}
+type AllModels = (string & {}) | ChatModel | 'o1-pro' | 'o1-pro-2025-03-19' | 'computer-use-preview' | 'computer-use-preview-2025-03-11';
+type ChatModel = 'gpt-4.1' | 'gpt-4.1-mini' | 'gpt-4.1-nano' | 'gpt-4.1-2025-04-14' | 'gpt-4.1-mini-2025-04-14' | 'gpt-4.1-nano-2025-04-14' | 'o4-mini' | 'o4-mini-2025-04-16' | 'o3' | 'o3-2025-04-16' | 'o3-mini' | 'o3-mini-2025-01-31' | 'o1' | 'o1-2024-12-17' | 'o1-preview' | 'o1-preview-2024-09-12' | 'o1-mini' | 'o1-mini-2024-09-12' | 'gpt-4o' | 'gpt-4o-2024-11-20' | 'gpt-4o-2024-08-06' | 'gpt-4o-2024-05-13' | 'gpt-4o-audio-preview' | 'gpt-4o-audio-preview-2024-10-01' | 'gpt-4o-audio-preview-2024-12-17' | 'gpt-4o-mini-audio-preview' | 'gpt-4o-mini-audio-preview-2024-12-17' | 'gpt-4o-search-preview' | 'gpt-4o-mini-search-preview' | 'gpt-4o-search-preview-2025-03-11' | 'gpt-4o-mini-search-preview-2025-03-11' | 'chatgpt-4o-latest' | 'codex-mini-latest' | 'gpt-4o-mini' | 'gpt-4o-mini-2024-07-18' | 'gpt-4-turbo' | 'gpt-4-turbo-2024-04-09' | 'gpt-4-0125-preview' | 'gpt-4-turbo-preview' | 'gpt-4-1106-preview' | 'gpt-4-vision-preview' | 'gpt-4' | 'gpt-4-0314' | 'gpt-4-0613' | 'gpt-4-32k' | 'gpt-4-32k-0314' | 'gpt-4-32k-0613' | 'gpt-3.5-turbo' | 'gpt-3.5-turbo-16k' | 'gpt-3.5-turbo-0301' | 'gpt-3.5-turbo-0613' | 'gpt-3.5-turbo-1106' | 'gpt-3.5-turbo-0125' | 'gpt-3.5-turbo-16k-0613';
+/**
+ * A filter used to compare a specified attribute key to a given value using a
+ * defined comparison operation.
+ */
+interface ComparisonFilter {
+  /**
+   * The key to compare against the value.
+   */
+  key: string;
+  /**
+   * Specifies the comparison operator: `eq`, `ne`, `gt`, `gte`, `lt`, `lte`.
+   *
+   * - `eq`: equals
+   * - `ne`: not equal
+   * - `gt`: greater than
+   * - `gte`: greater than or equal
+   * - `lt`: less than
+   * - `lte`: less than or equal
+   */
+  type: 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+  /**
+   * The value to compare against the attribute key; supports string, number, or
+   * boolean types.
+   */
+  value: string | number | boolean;
+}
+/**
+ * Combine multiple filters using `and` or `or`.
+ */
+interface CompoundFilter {
+  /**
+   * Array of filters to combine. Items can be `ComparisonFilter` or
+   * `CompoundFilter`.
+   */
+  filters: Array;
+  /**
+   * Type of operation: `and` or `or`.
+   */
+  type: 'and' | 'or';
+}
+interface ErrorObject {
+  code: string | null;
+  message: string;
+  param: string | null;
+  type: string;
+}
+interface FunctionDefinition {
+  /**
+   * The name of the function to be called. Must be a-z, A-Z, 0-9, or contain
+   * underscores and dashes, with a maximum length of 64.
+   */
+  name: string;
+  /**
+   * A description of what the function does, used by the model to choose when and
+   * how to call the function.
+   */
+  description?: string;
+  /**
+   * The parameters the functions accepts, described as a JSON Schema object. See the
+   * [guide](https://platform.openai.com/docs/guides/function-calling) for examples,
+   * and the
+   * [JSON Schema reference](https://json-schema.org/understanding-json-schema/) for
+   * documentation about the format.
+   *
+   * Omitting `parameters` defines a function with an empty parameter list.
+   */
+  parameters?: FunctionParameters;
+  /**
+   * Whether to enable strict schema adherence when generating the function call. If
+   * set to true, the model will follow the exact schema defined in the `parameters`
+   * field. Only a subset of JSON Schema is supported when `strict` is `true`. Learn
+   * more about Structured Outputs in the
+   * [function calling guide](docs/guides/function-calling).
+   */
+  strict?: boolean | null;
+}
+/**
+ * The parameters the functions accepts, described as a JSON Schema object. See the
+ * [guide](https://platform.openai.com/docs/guides/function-calling) for examples,
+ * and the
+ * [JSON Schema reference](https://json-schema.org/understanding-json-schema/) for
+ * documentation about the format.
+ *
+ * Omitting `parameters` defines a function with an empty parameter list.
+ */
+type FunctionParameters = Record;
+/**
+ * Set of 16 key-value pairs that can be attached to an object. This can be useful
+ * for storing additional information about the object in a structured format, and
+ * querying for objects via API or the dashboard.
+ *
+ * Keys are strings with a maximum length of 64 characters. Values are strings with
+ * a maximum length of 512 characters.
+ */
+type Metadata = Record;
+/**
+ * **o-series models only**
+ *
+ * Configuration options for
+ * [reasoning models](https://platform.openai.com/docs/guides/reasoning).
+ */
+interface Reasoning {
+  /**
+   * **o-series models only**
+   *
+   * Constrains effort on reasoning for
+   * [reasoning models](https://platform.openai.com/docs/guides/reasoning). Currently
+   * supported values are `low`, `medium`, and `high`. Reducing reasoning effort can
+   * result in faster responses and fewer tokens used on reasoning in a response.
+   */
+  effort?: ReasoningEffort | null;
+  /**
+   * @deprecated **Deprecated:** use `summary` instead.
+   *
+   * A summary of the reasoning performed by the model. This can be useful for
+   * debugging and understanding the model's reasoning process. One of `auto`,
+   * `concise`, or `detailed`.
+   */
+  generate_summary?: 'auto' | 'concise' | 'detailed' | null;
+  /**
+   * A summary of the reasoning performed by the model. This can be useful for
+   * debugging and understanding the model's reasoning process. One of `auto`,
+   * `concise`, or `detailed`.
+   */
+  summary?: 'auto' | 'concise' | 'detailed' | null;
+}
+/**
+ * **o-series models only**
+ *
+ * Constrains effort on reasoning for
+ * [reasoning models](https://platform.openai.com/docs/guides/reasoning). Currently
+ * supported values are `low`, `medium`, and `high`. Reducing reasoning effort can
+ * result in faster responses and fewer tokens used on reasoning in a response.
+ */
+type ReasoningEffort = 'low' | 'medium' | 'high' | null;
+/**
+ * JSON object response format. An older method of generating JSON responses. Using
+ * `json_schema` is recommended for models that support it. Note that the model
+ * will not generate JSON without a system or user message instructing it to do so.
+ */
+interface ResponseFormatJSONObject {
+  /**
+   * The type of response format being defined. Always `json_object`.
+   */
+  type: 'json_object';
+}
+/**
+ * JSON Schema response format. Used to generate structured JSON responses. Learn
+ * more about
+ * [Structured Outputs](https://platform.openai.com/docs/guides/structured-outputs).
+ */
+interface ResponseFormatJSONSchema {
+  /**
+   * Structured Outputs configuration options, including a JSON Schema.
+   */
+  json_schema: ResponseFormatJSONSchema.JSONSchema;
+  /**
+   * The type of response format being defined. Always `json_schema`.
+   */
+  type: 'json_schema';
+}
+declare namespace ResponseFormatJSONSchema {
+  /**
+   * Structured Outputs configuration options, including a JSON Schema.
+   */
+  interface JSONSchema {
+    /**
+     * The name of the response format. Must be a-z, A-Z, 0-9, or contain underscores
+     * and dashes, with a maximum length of 64.
+     */
+    name: string;
+    /**
+     * A description of what the response format is for, used by the model to determine
+     * how to respond in the format.
+     */
+    description?: string;
+    /**
+     * The schema for the response format, described as a JSON Schema object. Learn how
+     * to build JSON schemas [here](https://json-schema.org/).
+     */
+    schema?: Record;
+    /**
+     * Whether to enable strict schema adherence when generating the output. If set to
+     * true, the model will always follow the exact schema defined in the `schema`
+     * field. Only a subset of JSON Schema is supported when `strict` is `true`. To
+     * learn more, read the
+     * [Structured Outputs guide](https://platform.openai.com/docs/guides/structured-outputs).
+     */
+    strict?: boolean | null;
+  }
+}
+/**
+ * Default response format. Used to generate text responses.
+ */
+interface ResponseFormatText {
+  /**
+   * The type of response format being defined. Always `text`.
+   */
+  type: 'text';
+}
+type ResponsesModel = (string & {}) | ChatModel | 'o1-pro' | 'o1-pro-2025-03-19' | 'computer-use-preview' | 'computer-use-preview-2025-03-11';
+//#endregion
+//#region ../../node_modules/.pnpm/openai@4.104.0_ws@8.21.1_zod@3.25.76/node_modules/openai/resources/chat/completions/completions.d.ts
+interface ChatCompletionTool {
+  function: FunctionDefinition;
+  /**
+   * The type of the tool. Currently, only `function` is supported.
+   */
+  type: 'function';
+}
+//#endregion
+//#region src/components/AssistantChat/types.d.ts
+declare const ComposerMode: {
+  readonly PER_PANEL: 'per-panel';
+  readonly BROADCAST_ALL: 'broadcast-all';
+};
+type ComposerMode = (typeof ComposerMode)[keyof typeof ComposerMode];
+interface AssistantChatThreadAttributes {
+  ThreadViewport?: ComponentProps;
+}
+type AssistantChatMessageContentProps = Pick;
+interface AssistantChatProps {
+  /**
+   * The model name to route through inference gateway.
+   */
+  model: string;
+  /**
+   * Workspace used to build the default inference gateway URL.
+   */
+  workspace?: string;
+  /**
+   * Explicit OpenAI-compatible chat completions base URL. When omitted, `useChatCompletion`
+   * resolves inference gateway routing from workspace and model.
+   */
+  baseURL?: string;
+  /**
+   * Optional prompt data used for system prompt and inference parameter defaults.
+   */
+  promptData?: PromptData;
+  /**
+   * Optional OpenAI-compatible tools for the request.
+   */
+  tools?: ChatCompletionTool[];
+  /**
+   * Display name used in the composer placeholder.
+   */
+  assistantName?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  showRunningIndicator?: boolean;
+  attributes?: AssistantChatThreadAttributes;
+  className?: string;
+  initialMessages?: readonly ThreadMessageLike[];
+  onError?: (error: Error) => void;
+  /**
+   * Called once per assistant message after the stream completes (or after
+   * the non-stream completion lands). Surfaces per-message timing so callers
+   * can render their own latency/throughput UI without owning the runtime.
+   * Not invoked on cancellation or error.
+   */
+  onMessageComplete?: (info: AssistantMessageCompletion) => void;
+  /**
+   * Fires whenever the runtime's "is currently streaming" state changes.
+   * Lets a parent (e.g. a page that hosts many AssistantChats) aggregate the
+   * running state across instances — used by the Chat route to drive a global
+   * Stop button in Compare mode.
+   */
+  onRunningChange?: (isRunning: boolean) => void;
+  /**
+   * Fires whenever the thread transitions between empty and non-empty. Lets a
+   * parent derive seed-chip visibility from whether any messages exist.
+   */
+  onEmptyChange?: (isEmpty: boolean) => void;
+  /**
+   * Controls whether the internal composer is shown and how input is driven.
+   * In `broadcast-all` mode the composer is suppressed; a page-level composer
+   * drives every AssistantChat in parallel.
+   * @default ComposerMode.PER_PANEL
+   */
+  composerMode?: ComposerMode;
+  /**
+   * External broadcast trigger. Whenever `seq` changes (excluding initial
+   * mount), the runtime appends `text` as a new user message and runs a
+   * completion — same code path as a user typing into the composer.
+   */
+  broadcast?: BroadcastSignal;
+  /**
+   * Monotonic counter — when it changes, the runtime aborts any in-flight
+   * stream. Lets a parent cancel many AssistantChats at once.
+   */
+  stopCount?: number;
+  /**
+   * Content rendered immediately above the composer, inside the same outer
+   * frame. Use for seed-prompt chips or any prefatory hint that should read
+   * as part of the composer affordance rather than a separate block.
+   */
+  slotComposerStart?: ReactNode;
+  emptyState?: {
+    slotHeading?: string;
+    slotSubheading?: string;
+  };
+  /** Overrides used when rendering Markdown inside chat messages. */
+  messageContentProps?: AssistantChatMessageContentProps;
+  composerOverride?: ReactNode;
+  /**
+   * @default true
+   */
+  enableImageAttachments?: boolean;
+}
+interface BroadcastSignal {
+  /** Monotonically increasing sequence — on change, runtime fires a send. */
+  seq: number;
+  /** Text to inject as the user's next message. */
+  text: string;
+}
+interface AssistantMessageCompletion {
+  assistantMessageId: string;
+  text: string;
+  /** ms from request start to first delta (0 if non-stream). */
+  ttftMs: number;
+  /** ms from request start to final delta. */
+  totalMs: number;
+  /** Number of delta chunks (1 for non-stream). */
+  chunkCount: number;
+  /** Approximate; chars/4 fallback when the API doesn't return a usage block. */
+  completionTokens: number;
+  /** Completion tokens per second of streaming wall-time (excludes TTFT). */
+  tokensPerSec: number;
+}
+//#endregion
+//#region src/components/AssistantChat/index.d.ts
+export declare const AssistantChat: FC;
+//#endregion
+//#region src/components/AccordionSection/index.d.ts
+interface AccordionSectionProps {
+  icon?: ReactNode;
+  isDisabled?: boolean;
+  title: string;
+  value: string;
+  className?: string;
+  contentClassName?: string;
+}
+/**
+ * AccordionItem implementation to support a custom icon in the header of an accordion section.
+ */
+export declare const AccordionSection: FC>;
+declare namespace clsx_d_exports {
+  export { ClassArray, ClassDictionary, ClassValue$1 as ClassValue, clsx, clsx as default };
+}
+type ClassValue$1 = ClassArray | ClassDictionary | string | number | bigint | null | boolean | undefined;
+type ClassDictionary = Record;
+type ClassArray = ClassValue$1[];
+declare function clsx(...inputs: ClassValue$1[]): string;
+declare namespace types_d_exports {
+  export { ClassProp, ClassPropKey, ClassValue, OmitUndefined, StringToBoolean };
+}
+type ClassPropKey = "class" | "className";
+type ClassValue = ClassValue$1;
+type ClassProp = {
+  class: ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className: ClassValue;
+} | {
+  class?: never;
+  className?: never;
+};
+type OmitUndefined = T extends undefined ? never : T;
+type StringToBoolean = T extends "true" | "false" ? boolean : T;
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-primitive@2.1.4_@types+react-dom@19.2.3_@types+react@19.2.14__@types+re_79f9cc29726bbcca5df2cac469f5e931/node_modules/@radix-ui/react-primitive/dist/index.d.mts
+type PrimitivePropsWithRef$1 = React$2.ComponentPropsWithRef & {
+  asChild?: boolean;
+};
+//#endregion
+//#region ../../node_modules/.pnpm/@nvidia+foundations-react-core@1.7.0_@types+react-dom@19.2.3_@types+react@19.2.14__@typ_3c9beb47e01bfdc8313437db9c95ced2/node_modules/@nvidia/foundations-react-core/dist/index.d.ts
+/**
+ * Common attributes
+ * @see {@link https://react.dev/reference/react-dom/components/common}
+ */
+declare const COMMON_ATTRIBUTES: readonly ["dangerouslySetInnerHTML", "suppressContentEditableWarning", "suppressHydrationWarning", "style", "accessKey", "autoCapitalize", "className", "contentEditable", "dir", "draggable", "enterKeyHint", "hidden", "id", "is", "inputMode", "itemProp", "lang", "onAnimationEnd", "onAnimationEndCapture", "onAnimationIteration", "onAnimationIterationCapture", "onAnimationStart", "onAnimationStartCapture", "onAuxClick", "onAuxClickCapture", "onBeforeInput", "onBeforeInputCapture", "onBlur", "onBlurCapture", "onClick", "onClickCapture", "onCompositionStart", "onCompositionStartCapture", "onCompositionEnd", "onCompositionEndCapture", "onCompositionUpdate", "onCompositionUpdateCapture", "onContextMenu", "onContextMenuCapture", "onCopy", "onCopyCapture", "onCut", "onCutCapture", "onDoubleClick", "onDoubleClickCapture", "onDrag", "onDragCapture", "onDragEnd", "onDragEndCapture", "onDragEnter", "onDragEnterCapture", "onDragOver", "onDragOverCapture", "onDragStart", "onDragStartCapture", "onDrop", "onDropCapture", "onFocus", "onFocusCapture", "onGotPointerCapture", "onGotPointerCaptureCapture", "onKeyDown", "onKeyDownCapture", "onKeyPress", "onKeyPressCapture", "onKeyUp", "onKeyUpCapture", "onLostPointerCapture", "onLostPointerCaptureCapture", "onMouseDown", "onMouseDownCapture", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseMoveCapture", "onMouseOut", "onMouseOutCapture", "onMouseUp", "onMouseUpCapture", "onPointerCancel", "onPointerCancelCapture", "onPointerDown", "onPointerDownCapture", "onPointerEnter", "onPointerLeave", "onPointerMove", "onPointerMoveCapture", "onPointerOut", "onPointerOutCapture", "onPointerUp", "onPointerUpCapture", "onPaste", "onPasteCapture", "onScroll", "onScrollCapture", "onSelect", "onSelectCapture", "onTouchCancel", "onTouchCancelCapture", "onTouchEnd", "onTouchEndCapture", "onTouchMove", "onTouchMoveCapture", "onTouchStart", "onTouchStartCapture", "onTransitionEnd", "onTransitionEndCapture", "onWheel", "onWheelCapture", "role", "slot", "spellCheck", "tabIndex", "title", "translate", "onReset", "onResetCapture", "onSubmit", "onSubmitCapture", "onCancel", "onCancelCapture", "onClose", "onCloseCapture", "onToggle", "onToggleCapture", "onLoad", "onLoadCapture", "onError", "onErrorCapture", "onAbort", "onAbortCapture", "onCanPlay", "onCanPlayCapture", "onCanPlayThrough", "onCanPlayThroughCapture", "onDurationChange", "onDurationChangeCapture", "onEmptied", "onEmptiedCapture", "onEncrypted", "onEncryptedCapture", "onEnded", "onEndedCapture", "onLoadedData", "onLoadedDataCapture", "onLoadedMetadata", "onLoadedMetadataCapture", "onLoadStart", "onLoadStartCapture", "onPause", "onPauseCapture", "onPlay", "onPlayCapture", "onPlaying", "onPlayingCapture", "onProgress", "onProgressCapture", "onRateChange", "onRateChangeCapture", "onResize", "onResizeCapture", "onSeeked", "onSeekedCapture", "onSeeking", "onSeekingCapture", "onStalled", "onStalledCapture", "onSuspend", "onSuspendCapture", "onTimeUpdate", "onTimeUpdateCapture", "onVolumeChange", "onVolumeChangeCapture", "onWaiting", "onWaitingCapture"];
+/**
+ * Input attributes
+ * @see {@link https://react.dev/reference/react-dom/components/input}
+ */
+declare const INPUT_ATTRIBUTES: readonly ["accept", "alt", "capture", "autoComplete", "autoFocus", "checked", "defaultChecked", "defaultValue", "dirname", "disabled", "form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "height", "list", "max", "maxLength", "min", "minLength", "multiple", "name", "onChange", "onChangeCapture", "onInput", "onInputCapture", "onInvalid", "onInvalidCapture", "onSelect", "onSelectCapture", "pattern", "placeholder", "readOnly", "required", "size", "src", "step", "type", "value", "width", "aria-label", "aria-describedby", "aria-details", "aria-labelledby", "id"];
+declare const ELEMENT_ATTRIBUTE_MAP: {
+  readonly a: readonly ["href", "target", "rel", "download", "ping", "hrefLang", "referrerPolicy"];
+  readonly form: readonly ["action"];
+  readonly input: readonly Exclude<(typeof INPUT_ATTRIBUTES)[number], "dirname">[];
+  readonly select: readonly ["autoComplete", "autoFocus", "children", "defaultValue", "disabled", "form", "multiple", "name", "onChange", "onChangeCapture", "onInput", "onInputCapture", "onInvalid", "onInvalidCapture", "required", "size", "value", "aria-describedby", "aria-details", "aria-labelledby", "aria-label", "id", "name"];
+  readonly textarea: readonly ["autoComplete", "autoFocus", "cols", "defaultValue", "disabled", "form", "maxLength", "minLength", "name", "onChange", "onChangeCapture", "onInput", "onInputCapture", "onInvalid", "onInvalidCapture", "onSelect", "onSelectCapture", "placeholder", "readOnly", "required", "rows", "value", "wrap", "aria-describedby", "aria-details", "aria-labelledby", "aria-label", "id", "name"];
+  readonly button: readonly ["type", "disabled", "form", "formAction", "formMethod", "formNoValidate", "formTarget", "name", "value", "aria-describedby", "aria-details", "aria-labelledby", "id"];
+  readonly label: readonly ["form", "htmlFor"];
+  readonly img: readonly ["src", "alt", "width", "height", "loading", "decoding", "srcSet", "sizes", "crossOrigin", "referrerPolicy", "fetchPriority"];
+  readonly progress: readonly ["max", "value"];
+};
+type SupportedElement = keyof typeof ELEMENT_ATTRIBUTE_MAP;
+type AttributesFor = (typeof ELEMENT_ATTRIBUTE_MAP)[TElement][number];
+type ComponentType$1

= ForwardRefExoticComponent

> | JSXElementConstructor

; +/** + * A tuple type representing an HTML element and its corresponding React component + * @typeParam T - The HTML element type (e.g., "div", "input") + * @typeParam C - The React component type + * + * @example + * ```tsx + * type DivRoot = ElementComponentPair<"div", typeof RootComponent>; + * type InputField = ElementComponentPair<"input", typeof InputComponent>; + * ``` + */ +type ElementComponentPair = readonly [T, C]; +/** + * Type utility that allows mapping native HTML attributes to a component while ensuring type safety. + * It filters out attributes that would conflict with the component's props and allows data attributes to be passed through. + * + * @typeParam T - The HTML element type (e.g., "div", "button") + * @typeParam C - The component type to map attributes to + * + * @example + * ```tsx + * // Allow passing native div attributes to MyComponent + * type Props = { + * attributes?: NativeElementAttributes<"div", typeof MyComponent>; + * } + * ``` + */ +type NativeElementAttributes = { [K in keyof React$1.JSX.IntrinsicElements[T] as K extends "children" ? never : K extends keyof React$1.ComponentProps ? React$1.ComponentProps[K] extends React$1.JSX.IntrinsicElements[T][K] ? React$1.JSX.IntrinsicElements[T][K] extends React$1.ComponentProps[K] ? K : never : never : K]: React$1.JSX.IntrinsicElements[T][K]; } & { + [key: `data-${string}`]: string | number | boolean; +} & ("ref" extends keyof React$1.ComponentProps ? { + ref?: React$1.ComponentProps["ref"]; +} : Record); +/** + * Maps to our static attribute definitions from ELEMENT_ATTRIBUTE_MAP + * @internal + */ +type AttributeMap = typeof ELEMENT_ATTRIBUTE_MAP; +/** + * Recursively finds the first element that accepts an attribute and returns its type + * @internal + */ +type GetAttributeTypeForIndex = T extends readonly [infer First extends ElementComponentPair, ...infer Rest extends ElementComponentPair[]] ? K extends keyof React$1.JSX.IntrinsicElements[First[0]] ? React$1.JSX.IntrinsicElements[First[0]][K] : GetAttributeTypeForIndex : never; +/** + * Creates a type containing all valid HTML attributes that can be hoisted to components + * based on our static attribute maps. + * + * @remarks + * This type creates a union of all attributes from the provided element types, + * using our static maps to determine valid attributes. When an attribute is present + * on multiple elements, the type comes from the first element in the list that + * accepts it. + * + * @example + * ```tsx + * type AvatarProps = MergedHoistedElementAttributes<[ + * ["div", typeof AvatarRoot], + * ["img", typeof AvatarImage], + * ["div", typeof AvatarFallback] + * ]>; + * // Results in a type with all div and img attributes from our maps + * // with types from the first element that accepts each attribute + * ``` + */ +type MergedHoistedElementAttributes = Partial<{ [K in T[number] extends readonly [infer E, unknown] ? E extends keyof AttributeMap ? (typeof ELEMENT_ATTRIBUTE_MAP)[E & keyof AttributeMap][number] : never : never]: K extends (typeof COMMON_ATTRIBUTES)[number] ? K extends keyof React$1.JSX.IntrinsicElements[T[0][0]] ? React$1.JSX.IntrinsicElements[T[0][0]][K] : never : GetAttributeTypeForIndex; } & { [K in (typeof COMMON_ATTRIBUTES)[number]]: K extends keyof React$1.JSX.IntrinsicElements[T[0][0]] ? React$1.JSX.IntrinsicElements[T[0][0]][K] : never; } & { + [key: `data-${string}`]: string | number | boolean; + [key: `aria-${string}`]: string | number | boolean; +}>; +declare const primitiveStyles: (props?: ({ + gap?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; + padding?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; + paddingX?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; + paddingY?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; + paddingTop?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; + paddingRight?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; + paddingBottom?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; + paddingLeft?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "250" | "px" | "0.25" | "0.5" | "0.75" | "1.5" | "2.5" | "3.5" | "density-xxs" | "density-xs" | "density-sm" | "density-md" | "density-lg" | "density-xl" | "density-2xl" | "density-3xl" | "density-4xl" | "density-5xl" | "inherit" | null | undefined; +} & ClassProp) | undefined) => string; +type PrimitiveVariantProps = VariantProps; +type PrimitiveProps = PrimitivePropsWithRef$1; +interface WithAsChild { + /** Render-as-child slot (from Radix Primitive) */ + asChild?: boolean; +} +interface PrimitiveComponentProps extends WithAsChild { + /** + * Sets spacing between flex and grid items. + */ + gap?: PrimitiveVariantProps["gap"]; + /** + * Sets padding. + */ + padding?: PrimitiveVariantProps["padding"]; + /** + * Sets horizontal padding. + */ + paddingX?: PrimitiveVariantProps["paddingX"]; + /** + * Sets vertical padding. + */ + paddingY?: PrimitiveVariantProps["paddingY"]; + /** + * Sets top padding. + */ + paddingTop?: PrimitiveVariantProps["paddingTop"]; + /** + * Sets right padding. + */ + paddingRight?: PrimitiveVariantProps["paddingRight"]; + /** + * Sets bottom padding. + */ + paddingBottom?: PrimitiveVariantProps["paddingBottom"]; + /** + * Sets left padding. + */ + paddingLeft?: PrimitiveVariantProps["paddingLeft"]; +} +type PrimitivePropsWithRef = React$1.ComponentPropsWithRef & WithAsChild; +declare const text$1: (props?: ({ + fontFamily?: "sans" | "mono" | null | undefined; + fontWeight?: "bold" | "light" | "regular" | "semibold" | null | undefined; + fontStyle?: "normal" | "italic" | null | undefined; + fontSize?: "10" | "12" | "14" | "16" | "18" | "20" | "22" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "50" | "56" | "60" | "64" | "72" | "80" | null | undefined; + underline?: boolean | null | undefined; + lineHeight?: "100" | "125" | "150" | "175" | null | undefined; + kind?: "inherit" | "body/bold/2xl" | "body/bold/3xl" | "body/bold/lg" | "body/bold/md" | "body/bold/xl" | "body/bold/sm" | "body/bold/xs" | "body/regular/lg" | "body/regular/md" | "body/regular/sm" | "body/regular/xl" | "body/regular/2xl" | "body/regular/3xl" | "body/regular/xs" | "body/semibold/2xl" | "body/semibold/3xl" | "body/semibold/lg" | "body/semibold/md" | "body/semibold/sm" | "body/semibold/xl" | "body/semibold/xs" | "display/2xl" | "display/xl" | "display/lg" | "display/md" | "display/sm" | "display/xs" | "label/bold/2xl" | "label/bold/3xl" | "label/bold/lg" | "label/bold/md" | "label/bold/sm" | "label/bold/xl" | "label/bold/xs" | "label/light/lg" | "label/light/xl" | "label/light/2xl" | "label/light/3xl" | "label/light/md" | "label/light/sm" | "label/light/xs" | "label/regular/lg" | "label/regular/md" | "label/regular/sm" | "label/regular/xs" | "label/regular/xl" | "label/regular/2xl" | "label/regular/3xl" | "label/semibold/lg" | "label/semibold/md" | "label/semibold/sm" | "label/semibold/xl" | "label/semibold/2xl" | "label/semibold/3xl" | "label/semibold/xs" | "mono/md" | "mono/sm" | "mono/lg" | "mono/xl" | "mono/2xl" | "title/2xl" | "title/xl" | "title/lg" | "title/md" | "title/sm" | "title/xs" | null | undefined; +} & ClassProp) | undefined) => string; +type TextVariantProps = VariantProps; +interface TextProps extends PrimitivePropsWithRef<"span"> { + /** + * A semantic typography token combining family, weight, and size. Pass "inherit" to keep the parent's text style. + Use "display" for the largest hero text, "title" for headings, "body" for paragraphs, "label" for short labels and UI text, and "mono" for code or technical content. + * @defaultValue "label/regular/md" + * @llm Common mappings: page heading `title/lg`, section heading `title/md`, sub-section `title/sm`, paragraph `body/regular/md`, card title `body/bold/xl`, metadata `label/regular/sm`, form label `label/regular/sm`, code `mono/sm` or `mono/md`. Use `display/*` only on hero or marketing surfaces. + */ + kind?: TextVariantProps["kind"]; + /** Overrides the font weight inherited from `kind`. */ + fontWeight?: TextVariantProps["fontWeight"]; + /** Overrides the font family inherited from `kind`. */ + fontFamily?: TextVariantProps["fontFamily"]; + /** Sets the font style. */ + fontStyle?: TextVariantProps["fontStyle"]; + /** Overrides the font size inherited from `kind`, in pixels. */ + fontSize?: TextVariantProps["fontSize"]; + /** Overrides the line height inherited from `kind`, as a percentage of the font size. */ + lineHeight?: TextVariantProps["lineHeight"]; + /** Applies an underline to the text. */ + underline?: boolean; +} +/** + * Renders text with the design system's typography tokens applied. + * @param props - {@link TextProps} + * + * @llm Always pick a `kind` from the typography scale rather than overriding `fontSize` / `fontWeight` individually. + * @llm Pair heading kinds (`title/*`, `display/*`) with `asChild` and a semantic `h1`–`h6` so screen readers can navigate by heading level. + * @llm Do not render text in uppercase — no `uppercase` utility, no manually capitalized strings. Acronyms (API, GPU, URL) are the only exception. + * @llm Text renders an inline ``, so vertical margin utilities (`mt-*`, `mb-*`, `my-*`) are silently dropped — horizontal margins (`ml-*`, `mr-*`, `mx-*`) work fine. Inside a `Flex` or `Stack` this rarely surfaces because the parent `gap` handles spacing; it bites standalone `Text` in a vertical flow, where you should add `block` (or wrap in a block element). + * @llm Do not hallucinate `kind` values — only use the ones defined in the type. + * @llm When in doubt, map context to kind: page heading → `title/lg`; section heading → `title/md`; paragraph → `body/regular/md`; card title → `body/bold/xl`; card description → `body/regular/sm`; metadata → `label/regular/sm` with `text-secondary`; form label → `label/regular/sm`; hero headline → `display/lg`; code → `mono/sm` or `mono/md`. + * @llm Do NOT render text in uppercase because all-caps reduces reading speed 10-15% + * @llm `display/*` kinds are reserved for hero and marketing surfaces; use `title/*` for standard in-app headings. + * + * @example + * Kinds Text + * Pick a `kind` from one of the five families: `display/*` for the largest hero text, `title/*` for headings, `body/*` for prose, `label/*` for short UI labels, and `mono/*` for code or technical identifiers. Each family offers multiple sizes and weights — see the `kind` type for the full set. + * ```tsx + * + * Display Heading + * Section Title + * + * The quick brown fox jumps over the lazy dog + * + * Form Label + * console.log("hello") + * + * ``` + * + * @example + * Custom Styled Text + * Reach for the granular fontFamily, fontWeight, fontSize, lineHeight, and fontStyle props as an escape hatch when no predefined kind matches the design. + * ```tsx + * + * Custom typography + * + * ``` + * + * @example + * Underlined Text + * Add the underline prop on top of any kind to flag inline emphasis like links or highlighted terms without changing the type style. + * ```tsx + * + * Underlined passage + * + * ``` + * + * @example + * Inherit Kind Text + * Use kind="inherit" when Text is nested inside an element that already defines the type style (e.g. inside another Text or a styled heading) and you only need the Text primitive's other props. + * ```tsx + * Inherits parent typography + * ``` + * + * @example + * As Child Text + * Use asChild to apply Text styling to a semantic HTML element like h1–h6 without adding an extra wrapper. + * ```tsx + * + *

Semantic Heading

+ * + * ``` + */ +declare const Text: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +declare const anchor: (props?: ({ + kind?: "inline" | "standalone" | null | undefined; + disabled?: boolean | null | undefined; +} & ClassProp) | undefined) => string; +type AnchorVariantProps = VariantProps; +interface AnchorProps extends PrimitivePropsWithRef<"a">, Pick { + /** + * The kind of anchor. + * - "inline" - Embedded within prose; renders with an underline so the link remains distinguishable inside body text. + * - "standalone" - Rendered outside of prose, such as a navigation link or call to action; renders without an underline. + * @defaultValue "inline" + */ + kind?: AnchorVariantProps["kind"]; + /** + * Typography token applied to the link text. + * @defaultValue "body/regular/md" + * @llm For standalone anchors, prefer a label family token over the body default. + */ + textKind?: TextProps["kind"]; + /** + * Renders the anchor as a non-interactive `` so it no longer navigates. + * @defaultValue false + * @llm When using `asChild`, prefer to manage the disabled state on the consuming component instead of passing `disabled` to Anchor. + */ + disabled?: AnchorVariantProps["disabled"]; +} +/** + * Interactive text that navigates the user to another page, section, or resource. + * @param props - {@link AnchorProps} + * + * @alias Link + * + * @llm Use Anchor for navigation (URL or route). For actions that do not navigate (submit, toggle, open a modal), use Button instead. + * @llm When opening in a new tab, set `target="_blank"` and `rel="noopener"` (add `noreferrer` for untrusted destinations) to avoid the `window.opener` security issue. + * @see {@link Button} + * @see {@link Breadcrumbs} + * + * @example + * Basic Anchor + * ```tsx + * + * + * Inline + * + * + * Standalone + * + * + * ``` + * + * @example + * Custom Link Component + * Use asChild to render framework specific link components with our styling + * ```tsx + * + * Home + * + * ``` + * + * @example + * External Link Anchor + * When opening in a new tab, pair `target="_blank"` with `rel="noopener"` (add `noreferrer` for untrusted destinations) to avoid leaking the `window.opener` reference. + * ```tsx + * + * Open documentation + * + * ``` + * + * @example + * Disabled Anchor + * A disabled anchor will render as a span instead of an anchor tag + * ```tsx + * + * Disabled Link + * + * ``` + * + * @example + * As Button + * For an Anchor that looks like a link but triggers an action + * ```tsx + * + * + * + * ``` + */ +declare const Anchor: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +declare const button: (props?: ({ + size?: "small" | "medium" | "large" | "tiny" | null | undefined; + kind?: "primary" | "secondary" | "tertiary" | null | undefined; + color?: "brand" | "neutral" | "danger" | null | undefined; +} & ClassProp) | undefined) => string; +type ButtonVariantProps = VariantProps; +interface ButtonProps extends Omit, "color"> { + /** + * The color variant of the button. + * - "brand" - Prominent calls-to-action such as page-level CTAs and modal primary actions. + * - "neutral" - Regular actions, suitable for most use cases. + * - "danger" - Destructive actions that cannot be undone, such as delete or remove. + * @defaultValue "neutral" + */ + color?: ButtonVariantProps["color"]; + /** + * Disables the button. + */ + disabled?: boolean; + /** + * The kind of button. + * - "primary" - The most important call-to-action on the page. Only one per context. + * - "secondary" - Regular actions, suitable for most use cases. + * - "tertiary" - Low-priority or supplemental actions. + * @defaultValue "primary" + */ + kind?: ButtonVariantProps["kind"]; + /** + * The size of the button. + * - "large" - The main call-to-action for a page or section. + * - "medium" - Suitable for most use cases. + * - "small" - Compact layouts with limited space or less significant actions. + * - "tiny" - Dense layouts such as table cells where horizontal space is at a premium. + * @defaultValue "medium" + */ + size?: ButtonVariantProps["size"]; +} +/** + * A clickable element that triggers an action. Use specific verb + noun labels instead of vague text. + * @param props - {@link ButtonProps} + * + * @llm Unlike native + * + * + * + * ``` + * + * @example + * With Icon Button + * ```tsx + * + * ``` + * + * @example + * Icon Only Button + * ```tsx + * + * ``` + * + * @example + * Primary Action Button + * Preferred default for primary actions: primary & brand. Use the primary action button for the most important action in a context. It should be used sparingly and only for the most important actions(submit, create, deploy, save, etc) + * ```tsx + * + * ``` + * + * @example + * Secondary Action Button + * Preferred default for secondary actions: secondary & neutral. Use the secondary action button for actions that are not the most important in a context. It should be used for actions that are not the most important in a context(cancel, close, etc) + * ```tsx + * + * ``` + * + * @example + * Tertiary Or Inline Action Button + * Preferred default for tertiary/inline actions: tertiary & neutral. For example - edit, configure, kebab menu triggers, etc + * ```tsx + * + * ``` + * + * @example + * Destructive Action Button + * Preferred default for destructive actions: primary & danger. Use the destructive action button for actions that are destructive and cannot be undone. For status-changing or reversible actions (remove from list, unassign, archive), use secondary + neutral. Reserve `color="danger"` for irreversible destructive actions. + * ```tsx + * + * ``` + * + * @example + * Button As Link + * ```tsx + * + * ``` + * + * @example + * Button With Truncation + * Button text should be short and concise, and if not text will wrap to the next line to ensure users can read the text. If you prefer to truncate the text you should set the `title` prop. + * ```tsx + * + * ``` + */ +declare const Button: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +declare const badge: (props?: ({ + kind?: "solid" | "outline" | null | undefined; + color?: "blue" | "gray" | "green" | "purple" | "red" | "teal" | "yellow" | null | undefined; + size?: "small" | "medium" | "large" | null | undefined; +} & ClassProp) | undefined) => string; +type BadgeVariantProps = VariantProps; +interface BadgeProps extends Omit, "color"> { + /** + * Semantic color used to convey meaning at a glance. + * @defaultValue "blue" + */ + color?: BadgeVariantProps["color"]; + /** + * Visual treatment of the badge. + * - "outline" - De-emphasized contexts such as card metadata or secondary information. + * - "solid" - Prominent status badges in detail views, side panels, and status bars. + * @defaultValue "outline" + */ + kind?: BadgeVariantProps["kind"]; + /** + * Controls the badge's padding and text size. Reach for `small` in very dense layouts, and `large` for prominent status in detail views. + * @defaultValue "medium" + */ + size?: BadgeVariantProps["size"]; +} +interface CardContentProps extends ComponentPropsWithRef<"div"> {} +/** + * The body region of a composed card. Holds text, tags, and other primary content beneath any media. + * @param props - {@link CardContentProps} + */ +declare const CardContent: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +type SlottablePropsWithRef = PrimitivePropsWithRef; +declare const cardMedia: (props?: ({ + mediaTheme?: "dark" | "light" | null | undefined; +} & ClassProp) | undefined) => string; +interface CardMediaProps extends SlottablePropsWithRef<"div"> { + /** + * Forces the theme of overlaid `slotHeader` content so it contrasts with the media beneath. + * - "dark" - For light or bright media; renders overlaid content in the dark theme. + * - "light" - For dark media; renders overlaid content in the light theme. + */ + mediaTheme?: VariantProps["mediaTheme"]; + /** Overlays content (typically the card title and actions) on top of the media. */ + slotHeader?: React$1.ReactNode; +} +/** + * The media region of a composed card. Typically holds an image or video rendered above the content, with an optional overlaid header. + * @param props - {@link CardMediaProps} + */ +declare const CardMedia: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +/** + * Density variants for our density aware components. + * + * For any components that are density aware, you can use this constant to set the density of the + * component. We should not assign a defaultVariant/defaultValue for density - `undefined` will allow + * the component to inherit the density from the parent. + * + * @example + * ```ts + * const densityAwareComponentStyles = cva("nv-some-density-aware-component", { + * variants: { + * density: densityVariant, + * }, + * }); + * ``` + */ +declare const densityVariant: { + compact: "nv-density-compact"; + standard: "nv-density-standard"; + spacious: "nv-density-spacious"; +}; +interface DensityVariantProps { + /** + * The "density" of the component. This affects the component padding. Set to `compact` for dense layouts, `standard` for general use, and `spacious` for marketing or onboarding surfaces. + * @defaultValue "standard" + */ + density?: keyof typeof densityVariant | null; +} +declare const cardRoot: (props?: ({ + density?: "compact" | "standard" | "spacious" | null | undefined; + interactive?: boolean | null | undefined; + kind?: "solid" | "float" | "gradient" | null | undefined; + layout?: "horizontal" | "vertical" | null | undefined; + selected?: boolean | null | undefined; +} & ClassProp) | undefined) => string; +interface CardRootProps extends PrimitivePropsWithRef<"div">, DensityVariantProps { + /** + * Adds hover and focus affordances to signal the card is clickable. Do not enable on non-clickable cards — it creates false affordance. + * @defaultValue false + */ + interactive?: boolean; + /** + * Visual treatment of the card. + * - "solid" - General-purpose treatment with padded content and a hard border between media and content. Use for most cards. + * - "gradient" - Same as "solid" but the media fades into the content. Use for promotional or hero-style cards. + * - "float" - Pairs with `slotMedia` to render the media as a bordered tile while the content sits on the page background without padding. Use when the card should visually lift off the surface. + * @defaultValue "solid" + */ + kind?: VariantProps["kind"]; + /** + * Orientation of the media and content. + * - "vertical" - Media stacks above the content. Use when the media is the focal point and cards display in a grid. + * - "horizontal" - Media sits to the left of the content. Use when the content outweighs the media and cards stack in a list. + * @defaultValue "vertical" + */ + layout?: VariantProps["layout"]; + /** + * Applies the selected visual state, e.g. when the card represents the current choice in a list. + * @defaultValue false + * @llm Pair `selected` with a visible affordance for what selection means — a bulk action toolbar, a selection count indicator, or a primary action — so users understand the consequence of selecting a card. + */ + selected?: boolean; +} +interface CardProps extends CardRootProps, Pick { + /** Header content rendered above the body. When paired with `slotMedia`, it overlays the media instead. */ + slotHeader?: React$1.ReactNode; + /** Media content rendered above the body, typically an image or video. Pair with `mediaTheme` when also using `slotHeader` so overlaid content remains readable. */ + slotMedia?: React$1.ReactNode; + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + CardContent?: NativeElementAttributes<"div", typeof CardContent>; + CardMedia?: NativeElementAttributes<"div", typeof CardMedia>; + }; +} +/** + * A container that groups content, actions, and optional media about a single subject. Cards are fluid and grow to fill their container. + * @param props - {@link CardProps} + * + * @llm The Card already has padding, so do not add padding to the Card component or to it's children. + * @llm Card is for single-subject entity display (one cluster, one user, one model). Do not use Card as a general container on dashboards — use Panel instead. Card's interaction states and internal structure add unintended visual layering when used as a generic wrapper. + * @llm Cards are fluid and grow to fill their container — do not set fixed widths. Control sizing through the parent layout (e.g. a responsive Grid). Apply `className="h-fit"` when a card should shrink to its content height. + * @llm Identity test for Card vs Panel: if the container represents "a thing" with its own name and attributes, use Card; if it represents "a region of content", use Panel. + * @llm Pair `selected` with a bulk-action toolbar or selection-count indicator so users understand what selection means. + * @llm A Card is EITHER a single click target (set `interactive` and render via `asChild` as a link, button or label with containing hidden input) OR carries inline action buttons on its surface — never both. Combining them creates competing click targets and ambiguous focus order. + * @llm When a Card is `interactive`, do not place other interactive elements (Button, Anchor, Menu, etc.) inside it. Nested click targets break the "whole card is one click" affordance. + * + * @see {@link Panel} + * @see {@link Grid} + * + * @example + * Basic Card That Fits Its Content + * ```tsx + * + * + * Badge + * + * Header + * Lorem ipsum dolor sit amet + * + * ``` + * + * @example + * With Header Card + * The header slot is rendered absolutely over the media. Use it to add a persistent label or badge above the body content. If there is no media, the header will be rendered above the body content. It is a flex container with a preset gap. + * ```tsx + * + * New + * Alt + * + * } + * > + * Card body content + * + * ``` + * + * @example + * With Media Card + * Use when the card needs a visual hero area like an image or video above or alongside the content. If the media rendered is dark or light, and you're using `slotHeader` in conjunction with it, you may want to set `mediaTheme` to ensure text and components are readable. This will set light/dark theme in the header slot to ensure sufficient contrast. + * ```tsx + * Featured} + * slotMedia={} + * mediaTheme="light" + * > + * Card content below media + * + * ``` + * + * @example + * Model Card Example + * Canonical browse-collection card anatomy for a single entity (model catalog, dataset gallery, template library, related-item strip). Slot order: header `Badge` (resource type) → publisher → title → description → topic `Tag` row (`outline` / `gray`) → footer stats (`text-placeholder`, left-aligned, never `justify="between"`). Every card in the collection must share this same slot structure — see the entity-cards pattern guide. + * ```tsx + * Model}> + * + * + * NVIDIA + * + * Nemotron 3 Super 120B + * + * 120B-parameter reasoning model optimized for enterprise RAG. + * + * + * + * + * Reasoning + * + * + * English + * + * + * RAG + * + * + * + * Updated 3d · 12.4k · 120B + * + * + * ``` + * + * @example + * Interactive Card + * Use when the entire card should be a clickable target, such as navigation or selection. Render as an `` for navigation or a button for actions. Do not place other interactive elements (Button, Anchor, Menu, etc.) on the card surface — competing click targets are ambiguous. If you need inline actions per card instead, omit `interactive` and use the `With Actions` pattern below. + * ```tsx + * + * + * + * ``` + * + * @example + * With Actions + * Use when the user needs to perform actions without navigating to a detail view, or when multiple distinct actions are available per card. The card itself is not a click target in this pattern — do not also enable `interactive`. + * ```tsx + * + * Card content... Right aligned actions: + * + * + * + * + * Or you can have actions stretch across the card: + * + * + * + * + * Or for just a single action: + * + * + * ``` + * + * @example + * Cards In Responsive Grid + * It's common to use cards in a responsive grid. Using the grid component, set a minimum column width and let the cards automatically resize to fill the available space. + * ```tsx + * + * Card 1 + * Card 2 + * Card 3 + * + * ``` + * + * @example + * Composed + * ```tsx + * + * + * Featured}> + * + * + * Composed card with media + * + * + * + *
+ * Featured + *
+ * Composed card without media + *
+ *
+ *
+ * ``` + */ +declare const Card$1: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +declare const label$1: (props?: ({ + disabled?: boolean | null | undefined; + size?: "small" | "medium" | "large" | null | undefined; +} & ClassProp) | undefined) => string; +interface LabelProps extends PrimitivePropsWithRef<"label"> { + /** ID of the form control this label is associated with. */ + htmlFor?: string; + /** Styles the label as disabled, for use only with disabled form controls. */ + disabled?: boolean; + /** + * Typographic size of the label. + * @defaultValue "medium" + */ + size?: VariantProps["size"]; +} +/** + * A text label for a form control. Prefer FormField for end-user forms; this primitive is intended for composing custom field layouts. + * @param props - {@link LabelProps} + * + * @example + * Basic Label + * Use when labeling a form input to provide accessible context for the control. + * ```tsx + * + * ``` + * + * @example + * Disabled Label + * Use when the associated input is disabled to visually communicate the inactive state. + * ```tsx + * + * ``` + * + * @example + * Small Label + * Use in compact layouts or alongside small-sized inputs where space is limited. + * ```tsx + * + * ``` + * + * @example + * Label With Icon + * Use when the label needs an inline help affordance. Label accepts arbitrary children so an icon or tooltip can sit alongside the text. + * ```tsx + * + * ``` + */ +declare const Label: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +/** Checked state of a checkbox, including the tri-state `"indeterminate"` value. */ +type CheckedState = boolean | "indeterminate"; +interface CheckboxInputProps extends Omit, "defaultChecked" | "checked" | "type"> { + /** + * Initial checked state when the checkbox is uncontrolled. + */ + defaultChecked?: boolean; + /** + * Controlled checked state; pair with `onCheckedChange` to handle updates. + */ + checked?: CheckedState; + /** + * Called when the checked state changes. + */ + onCheckedChange?: (checked: CheckedState) => void; + /** + * Renders the checkbox in an error state. + */ + error?: boolean; + /** + * Disables interaction with the checkbox. + */ + disabled?: boolean; + /** + * Form field name submitted with the checkbox value as a name/value pair. + */ + name?: string; + /** + * Requires the checkbox to be checked for form submission. + */ + required?: boolean; + /** + * ID of the form element to associate with, allowing the checkbox to be rendered outside that form. + */ + form?: string; +} +/** + * The `` element of a composed checkbox, including indeterminate-state handling and form integration. + * @param props - {@link CheckboxInputProps} + */ +declare const CheckboxInput: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +declare const checkboxRoot: (props?: ({ + labelSide?: "left" | "right" | null | undefined; +} & ClassProp) | undefined) => string; +interface CheckboxRootProps extends PrimitivePropsWithRef<"div"> { + /** + * Side of the checkbox the label is rendered on. + * @defaultValue "right" + */ + labelSide?: VariantProps["labelSide"]; +} +interface PropsFromRoot$4 extends Omit | "ref"> {} +interface PropsFromInput$3 extends Pick> | "onCheckedChange" | "error"> {} +interface CheckboxProps extends PropsFromRoot$4, PropsFromInput$3 { + /** + * Label rendered next to the checkbox and automatically associated with it for clicks and assistive tech. + */ + slotLabel?: React$1.ReactNode; + /** + * Native HTML attributes forwarded to the internal composed components. + */ + attributes?: { + CheckboxInput?: NativeElementAttributes<"input", typeof CheckboxInput>; + Label?: NativeElementAttributes<"label", typeof Label>; + }; +} +declare const inputShell: (props?: ({ + kind?: "flat" | "floating" | null | undefined; + layout?: "horizontal" | "vertical" | null | undefined; + size?: "small" | "medium" | "large" | null | undefined; + withValidation?: boolean | null | undefined; +} & ClassProp) | undefined) => string; +type InputShellVariantProps = VariantProps; +interface InputShellProps extends ComponentPropsWithoutRef<"div"> { + /** Render-as-child slot (from Radix Primitive) */ + asChild?: boolean; + /** + * When true, the input will not redirect focus to the input when clicked. + * @defaultValue false + */ + disableFocusRedirect?: boolean; + /** + * Visual treatment of the shell. `"flat"` has a border and background; `"floating"` is borderless and transparent. + * @defaultValue "flat" + */ + kind?: InputShellVariantProps["kind"]; + /** + * Axis along which slotted content is arranged inside the shell. `"vertical"` stacks slots in a column with auto height block padding. + * @defaultValue "horizontal" + */ + layout?: InputShellVariantProps["layout"]; + /** + * Overall height and typography of the shell. + * @defaultValue "medium" + */ + size?: InputShellVariantProps["size"]; + /** Surfaces success and error styling automatically based on the inner input's `:user-valid` and `:user-invalid` states. */ + withValidation?: boolean; +} +/** + * Mixin interface for components whose prop types are intersected with input-shell status. Not a component or standalone prop — it is composed into other component prop types (for example, upload triggers) and is not imported or used directly. + */ +interface WithInputShellStatus { + /** + * The status of the input. Use `withValidation` to automatically apply success/error states based + * on `:user-valid` and `:user-invalid` pseudo classes. + */ + status?: "success" | "error"; +} +/** + * A clear-the-value button rendered inside dismissible inputs. + * @param props - {@link ButtonProps} + */ +declare const InputDismissButton: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +declare const dividerElement: (props?: ({ + orientation?: "horizontal" | "vertical" | null | undefined; + width?: "small" | "medium" | "large" | null | undefined; +} & ClassProp) | undefined) => string; +type DividerElementVariantProps = VariantProps; +interface DividerElementProps extends PrimitivePropsWithRef<"div"> { + /** + * Axis the separator runs along. + * @defaultValue "horizontal" + */ + orientation?: DividerElementVariantProps["orientation"]; + /** + * Thickness of the separator line. Step up to `"medium"` only when separating major page sections that need extra visual weight + * @defaultValue "small" + */ + width?: DividerElementVariantProps["width"]; +} +/** + * A horizontal or vertical separator line with configurable thickness. + * @param props - {@link DividerElementProps} + */ +declare const DividerElement: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +interface DividerRootProps extends PrimitivePropsWithRef<"div">, Pick {} +/** + * The outermost element of a composed divider. Applies padding tokens around the separator line. + * @param props - {@link DividerRootProps} + */ +declare const DividerRoot: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +interface DividerProps extends DividerElementProps, Pick { + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DividerRoot?: NativeElementAttributes<"div", typeof DividerRoot>; + DividerElement?: NativeElementAttributes<"div", typeof DividerElement>; + }; +} +/** + * A horizontal or vertical line that visually separates groups of content. Use to create breaks between sections, list items, or toolbar regions where a heading or whitespace alone would be too subtle. + * @param props - {@link DividerProps} + * + * @llm Prefer spacing or a section heading over a Divider inside cards and between form sections — lines there read as visual noise. Reserve Divider for breaks between distinct regions (sidebar sections, list groups, panel areas). For form sections, replace dividers with a `Text kind="title/sm"` heading and spacing. + * @llm Use `orientation="vertical"` only for toolbars or side-by-side layouts; default to horizontal. + * @llm Default to `width="small"`; reserve `"medium"` for more visual weight when separating major page sections. + * + * @see {@link Stack} + * + * @example + * Basic Divider + * ```tsx + * + * + * + * + * + * ``` + * + * @example + * With Text + * ```tsx + * + * + * Text + * + * + * ``` + * + * @example + * Vertical Divider + * ```tsx + * + * ``` + * + * @example + * Composed + * ```tsx + * + * + * + * ``` + */ +declare const Divider: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +interface RadioGroupInputProps extends Omit, "type" | "value"> { + /** Value submitted with the form when this option is selected. */ + value: string; + /** Marks this individual option as destructive. Pair with destructive copy on the label. */ + danger?: boolean; + /** Renders this option in an error state. */ + error?: boolean; + /** + * Shows the radio indicator. When `false`, the input remains in the DOM but is visually hidden so tile-style items can convey the selected state themselves. + * @defaultValue true + */ + showIndicator?: boolean; + /** Called with this option's value when it becomes the selected radio in the group. */ + onValueChange?: (value: string) => void; +} +/** + * A native `` styled with KUI tokens. Inherits the group's `name`, `value`, and shared attributes from its surrounding root. + * @param props - {@link RadioGroupInputProps} + */ +declare const RadioGroupInput: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +interface RadioGroupItemProps extends Omit, "children" | "value" | "defaultValue"> { + /** Label for the radio input. */ + children: React.ReactNode; +} +/** + * A `
` by default; use `renderLink` to swap in a framework-specific link component. */ + href?: string; + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DropdownItem?: NativeElementAttributes<"button", typeof DropdownItem>; + }; +} +interface DropdownCheckboxItemEntry extends Omit { + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DropdownCheckboxItem?: NativeElementAttributes<"button", typeof MenuCheckboxItem>; + }; +} +interface DropdownRadioItemEntry extends Omit { + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DropdownRadioGroupItem?: NativeElementAttributes<"button", typeof MenuRadioGroupItem>; + }; +} +interface DropdownDividerItemEntry extends Omit { + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + Divider?: NativeElementAttributes<"div", typeof Divider>; + }; +} +interface DropdownRadioGroupEntry extends Omit { + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DropdownRadioGroup?: NativeElementAttributes<"div", typeof MenuRadioGroup>; + DropdownHeading?: NativeElementAttributes<"div", typeof MenuHeading>; + }; + /** Items rendered inside the radio group. */ + items: (string | DropdownRadioItemEntry)[]; +} +interface DropdownSubSection extends BaseDropdownItem, Pick, Pick { + /** Identifies this entry as a submenu. */ + kind: "sub"; + /** Content rendered inside the submenu trigger. */ + children: ReactNode; + /** Items rendered inside the submenu. */ + items: (DropdownDefaultItemEntry | DropdownCheckboxItemEntry | DropdownRadioGroupEntry | DropdownDividerItemEntry | (Omit & { + items: (DropdownDefaultItemEntry | DropdownCheckboxItemEntry | DropdownDividerItemEntry)[]; + }))[]; + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DropdownSubTrigger?: NativeElementAttributes<"button", typeof DropdownSubTrigger>; + DropdownSubContent?: NativeElementAttributes<"menu", typeof DropdownSubContent>; + }; +} +interface DropdownSectionEntry extends Omit { + /** Items rendered inside the section. */ + items: (DropdownDefaultItemEntry | DropdownCheckboxItemEntry | DropdownSubSection | DropdownDividerItemEntry)[]; + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DropdownSection?: NativeElementAttributes<"div", typeof MenuSection>; + DropdownHeading?: NativeElementAttributes<"div", typeof MenuHeading>; + }; +} +type DropdownEntry = string | DropdownDefaultItemEntry | DropdownCheckboxItemEntry | DropdownRadioGroupEntry | DropdownSubSection | DropdownSectionEntry | DropdownDividerItemEntry; +type DropdownRenderLinkItem = SafeHrefProp; +interface DropdownProps extends PropsWithChildren & Pick & Pick & NativeElementAttributes<"button", typeof DropdownTrigger>> { + /** Custom renderer for items with an `href`. Use to swap in a framework-specific link component such as Next.js ``. */ + renderLink?: (item: DropdownRenderLinkItem) => ReactNode; + /** Initial value of the dropdown search input when filterable. */ + defaultFilterValue?: string; + /** + * Renders a search input that filters the items. + * @defaultValue false + */ + filterable?: boolean; + /** Controlled value of the search input. Pair with `onFilterChange`. */ + filterValue?: string; + /** Overrides the default substring matching used to filter items. */ + filterMatchFn?: MenuSearchProviderProps["matchFn"]; + /** Called when the search value changes. */ + onFilterChange?: (value: string) => void; + /** Disables interaction with the dropdown. */ + disabled?: boolean; + /** Entries rendered inside the dropdown. */ + items: DropdownEntry[]; + /** Called when a checkbox item's checked state changes. */ + onItemCheckedChange?: (item: DropdownCheckboxItemEntry, checked: CheckedState) => void; + /** Called when an item is selected via mouse or keyboard. */ + onItemSelect?: (event: Event, item: DropdownDefaultItemEntry | DropdownCheckboxItemEntry | DropdownRadioItemEntry) => void; + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + DropdownContent?: NativeElementAttributes<"menu", typeof DropdownContent>; + MenuSearch?: NativeElementAttributes<"input", typeof MenuSearch>; + }; +} +interface PopoverContentProps extends PrimitiveProps<"div"> { + /** Called when focus returns to the trigger after the popover closes. Call `event.preventDefault()` to skip the default focus restoration. */ + onCloseAutoFocus?: (event: Event) => void; + /** Called when focus first moves into the popover after it opens. Call `event.preventDefault()` to skip the default focus behavior. */ + onOpenAutoFocus?: (event: Event) => void; + /** Called when Escape is pressed inside the popover. Call `event.preventDefault()` to keep the popover open. */ + onEscapeKeyDown?: (event: KeyboardEvent) => void; + /** Called when a pointer event occurs outside the popover. Call `event.preventDefault()` to keep the popover open. */ + onPointerDownOutside?: (event: Event) => void; + /** Called when any interaction occurs outside the popover. Call `event.preventDefault()` to keep the popover open. */ + onInteractOutside?: (event: Event) => void; + /** + * Alignment of the popover relative to its anchor. + * @defaultValue "center" + */ + align?: "start" | "end" | "center"; + /** + * Preferred side of the anchor to render against. Flips automatically when the popover would overflow the viewport. + * @defaultValue "bottom" + */ + side?: "top" | "bottom" | "left" | "right"; + /** Overrides the CSS anchor name the popover positions against. Use to pair with a custom anchor name set on `PopoverTrigger` or `PopoverAnchor`. */ + positionAnchor?: string; +} +interface PopoverRootProps extends PropsWithChildren { + /** Stable identifier used to derive the popover's content id and CSS anchor name. Provide a stable value when rendering in SSR-sensitive trees. */ + id?: string; + /** + * Initial open state when uncontrolled. + * @defaultValue false + */ + defaultOpen?: boolean; + /** Controlled open state. When provided, the consumer is responsible for updating it in response to `onOpenChange`. */ + open?: boolean; + /** Called when the open state changes. */ + onOpenChange?: (open: boolean) => void; + /** + * Disables interaction with the rest of the page while the popover is open and hides it from assistive tech. + * @defaultValue false + */ + modal?: boolean; +} +interface PopoverTriggerProps extends PrimitivePropsWithRef<"button"> { + /** Disables the popover trigger, preventing it from opening the popover. */ + disabled?: boolean; + /** Overrides the auto-generated CSS anchor name. Must be a CSS custom property (e.g. `--my-popover`) matching `positionAnchor` on the corresponding `PopoverContent`. */ + anchorName?: string; +} +/** + * Button that toggles the popover. Uses the native `popovertarget` attribute so the popover still toggles when JavaScript is unavailable. + * @param props - {@link PopoverTriggerProps} + */ +declare const PopoverTrigger: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +interface PopoverProps extends PopoverContentProps, Pick, Pick { + /** Content rendered inside the popover panel. */ + slotContent: React$1.ReactNode; + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + PopoverTrigger?: NativeElementAttributes<"button", typeof PopoverTrigger>; + }; +} +/** + * A floating panel that displays rich content, options, or actions anchored to a trigger. + * @param props - {@link PopoverProps} + * + * @llm For single-string hints, use Tooltip — click-to-reveal for simple text adds an unnecessary interaction step. + * @llm The interaction test: Tooltip = hover + text-only, Popover = click + rich content, Dropdown = click + item selection, Modal = click + blocking. Use Popover only when the surface is click-triggered and the content is richer than plain text. + * @llm Do not use Popover as a filter panel or to host complex multi-step forms — reach for Dropdown for action menus, or SidePanel for complex interactive content. + * @llm Render the trigger as a Button or other clearly interactive element so users recognize the surface is clickable. Plain text triggers offer no affordance. + * @llm Do not nest Popovers — flatten the information hierarchy instead. + * @llm Use Popover for onboarding guidance and task walkthroughs (e.g. "Step 1 of 3: Configure your cluster") anchored to the relevant trigger. + * @llm Use `align="start"` or `align="end"` when the popover content is wide enough to overflow the viewport if centered. + * @llm Set `modal={true}` only when the content needs focus trapping (e.g. an inline form inside the popover). + * @llm Top-level props are split by element kind: recognized ` + * + * ``` + * + * @example + * Positioning Popover + * Combine `side` (`top` | `bottom` | `left` | `right`) and `align` (`start` | `center` | `end`) to control where the popover renders relative to its trigger. Override the defaults when the trigger sits near a viewport edge or sibling content would otherwise overlap. + * ```tsx + * Right side, end aligned

} + * > + * + *
+ * ``` + * + * @example + * With Chevron Popover + * Add `AnimatedChevron` inside the trigger to give a visual hint that the button toggles an open/closed surface. + * ```tsx + * Additional context about this item.

}> + * + *
+ * ``` + * + * @example + * With Rich Content Popover + * Compose layout primitives inside `slotContent` to render rich, structured content like profile cards. Keep the content focused — avoid overcrowding the popover. + * ```tsx + * + * + * + * + * + * John Doe + * + * Active + * + * + * Product Designer + * + * + * + * + * + * + * + * } + * > + * + * + * ``` + * + * @example + * Modal Popover + * Use when the popover content requires focused interaction and should prevent access to the rest of the page. + * ```tsx + * + *

This popover traps focus and dims the background.

+ * + * + * } + * > + * + *
+ * ``` + * + * @example + * With Anchor Popover + * Use `PopoverAnchor` when the popover should position against an element other than the trigger — for example, a row in a table where the action button lives in a different cell. + * ```tsx + * + * + * + * + * + * + * Content anchors here + * + * + * + *

This popover positions against the anchor, not the trigger.

+ *
+ *
+ * ``` + * + * @example + * Composed + * Use composed primitives when you need full control over the popover trigger and content layout. + * ```tsx + * + * + * + * + * + *

Composed popover content using primitives directly.

+ *
+ *
+ * ``` + */ +declare const Popover: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +declare const flex: (props?: ({ + align?: "center" | "end" | "start" | "baseline" | "stretch" | null | undefined; + direction?: "col" | "row" | "row-reverse" | "col-reverse" | "column" | "column-reverse" | null | undefined; + justify?: "center" | "end" | "start" | "stretch" | "normal" | "between" | "around" | "evenly" | null | undefined; + wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined; +} & ClassProp) | undefined) => string; +type FlexVariantProps = VariantProps; +interface FlexProps extends React$1.ComponentPropsWithRef<"div">, PrimitiveComponentProps { + /** + * Alignment of items along the cross axis. Maps to CSS `align-items`. + * @defaultValue "stretch" + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items + */ + align?: FlexVariantProps["align"]; + /** + * Direction items flow along the main axis. Maps to CSS `flex-direction`. + * @defaultValue "row" + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction + */ + direction?: FlexVariantProps["direction"]; + /** + * Distribution of space along the main axis. Maps to CSS `justify-content`. + * @defaultValue "start" + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content + */ + justify?: FlexVariantProps["justify"]; + /** + * Wrapping behavior of the container. Maps to CSS `flex-wrap`. + * @defaultValue "nowrap" + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap + */ + wrap?: FlexVariantProps["wrap"]; +} +interface FormFieldContentGroupProps extends PrimitivePropsWithRef<"div"> {} +/** + * Wraps the input controls and helper text within a form field. + * @param props - {@link FormFieldContentGroupProps} + */ +declare const FormFieldContentGroup: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +interface FormFieldControlGroupProps extends PrimitivePropsWithRef<"div"> {} +/** + * Wraps the input control(s) within a form field, grouping them for layout alongside affixes and helper text. + * @param props - {@link FormFieldControlGroupProps} + */ +declare const FormFieldControlGroup: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +declare const formFieldHelper: (props?: ({ + kind?: "error" | "info" | "success" | null | undefined; +} & ClassProp) | undefined) => string; +type FormFieldHelperVariantProps = VariantProps; +interface FormFieldHelperProps extends PrimitivePropsWithRef<"div"> { + /** Visual treatment for the helper text. Defaults to the surrounding field's status when omitted. */ + kind?: FormFieldHelperVariantProps["kind"]; +} +/** + * Helper text rendered below a form field, used for instructions, error messages, or success confirmations. + * @param props - {@link FormFieldHelperProps} + */ +declare const FormFieldHelper: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +interface FormFieldInfoProps { + /** Supplementary content shown inside the info popover and mirrored off-screen so the control's `aria-details` resolves to it. */ + children: ReactNode; + /** + * Accessible label for the info trigger button. + * @defaultValue "More information" + */ + triggerLabel?: string; + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + Popover?: NativeElementAttributes<"div", typeof Popover> & Pick; + PopoverTrigger?: NativeElementAttributes<"button", typeof PopoverTrigger> & Pick; + }; +} +interface FormFieldLabelGroupProps extends PrimitivePropsWithRef<"div"> {} +/** + * Wraps the label and any adjacent affordances such as the info icon within a form field. + * @param props - {@link FormFieldLabelGroupProps} + */ +declare const FormFieldLabelGroup: React$2.ForwardRefExoticComponent & React$2.RefAttributes>; +declare const formFieldRoot: (props?: ({ + labelPosition?: "left" | "top" | null | undefined; + required?: boolean | null | undefined; +} & ClassProp) | undefined) => string; +type FormFieldRootVariantProps = VariantProps; +interface FormFieldRootProps extends Omit, "id"> { + /** Identifier used to associate the label, helper text, and control. Falls back to an auto-generated id. */ + id?: string; + /** Form control name submitted with the field's value. */ + name?: string; + /** Validation state shared with descendants to drive styling and messaging. */ + status?: FormFieldContextType["status"]; + /** Marks the field as required, rendering the required indicator and propagating to the control. */ + required?: boolean; + /** + * Id assigned to the label element. Defaults to `${id}-label`. The label is referenced in the + * server-rendered `aria-labelledby` only when this is an explicit string; composed `FormFieldLabel` + * children otherwise wire it up automatically once mounted. Pass `null` to omit the id entirely. + */ + labelId?: string | null; + /** + * Id assigned to the helper element. Defaults to `${id}-helper`. Referenced in the server-rendered + * `aria-describedby` only when this is an explicit string; a composed `FormFieldHelper` otherwise + * wires it up automatically once mounted. Pass `null` to omit the id entirely. + */ + helperId?: string | null; + /** + * Id assigned to the supplementary info element. Defaults to `${id}-info`. Referenced in the + * server-rendered `aria-describedby` / `aria-details` only when this is an explicit string; a + * composed `FormFieldInfo` otherwise wires it up automatically once mounted. Pass `null` to omit + * the id entirely. + */ + infoId?: string | null; + /** + * @deprecated Prefer using the individual props + */ + context?: FormFieldContextType; + /** + * Placement of the label relative to the input. + * - "top" - Standard creation flows and most forms. Supports variable-width inputs and is the fastest position for completion. + * - "left" - Dense settings panels or key-value layouts with short, consistent labels and constrained vertical space. + * @defaultValue "top" + * @llm Use one `labelPosition` for every field in the same form — switching mid-form disrupts the user's scanning pattern. + */ + labelPosition?: FormFieldRootVariantProps["labelPosition"]; +} +interface FormFieldProps extends Omit, "children">, Pick, Pick { + /** Unique identifier used to associate the label and helper text with the underlying input. Falls back to an auto-generated ID. */ + id?: string; + /** Validation state that drives styling and selects which helper message is shown. */ + status?: "success" | "error"; + /** Form control name submitted with the field's value. */ + name?: string; + /** Label content rendered above or beside the input. */ + slotLabel?: ReactNode; + /** Content shown inside the popover triggered by the info icon next to the label. */ + slotInfo?: ReactNode; + /** Message rendered below the input when `status` is `"error"`. */ + slotError?: ReactNode; + /** Message rendered below the input when `status` is `"success"`. */ + slotSuccess?: ReactNode; + /** Helper message rendered below the input when no validation status is set. */ + slotHelp?: ReactNode; + /** Input element(s) wrapped by the field, or a render function that receives the field's accessibility context. */ + children?: ReactNode | ((args: FormFieldContextType) => ReactElement); + /** Native HTML attributes forwarded to the internal composed components. */ + attributes?: { + Label?: NativeElementAttributes<"label", typeof Label>; + FormFieldLabelGroup?: NativeElementAttributes<"div", typeof FormFieldLabelGroup>; + FormFieldContentGroup?: NativeElementAttributes<"div", typeof FormFieldContentGroup>; + FormFieldControlGroup?: NativeElementAttributes<"div", typeof FormFieldControlGroup>; + FormFieldHelper?: NativeElementAttributes<"div", typeof FormFieldHelper>; + } & FormFieldInfoProps["attributes"]; +} +declare const tabsContent: (props?: ({ + padding?: "default" | "none" | null | undefined; +} & ClassProp) | undefined) => string; +type TabsContentVariantProps = VariantProps; +interface TabsContentProps extends PrimitivePropsWithRef<"div">, TabsContentVariantProps { + /** Keeps the panel mounted even when its tab is not active. Useful for preserving state across switches. */ + forceMount?: true; + /** + * Padding applied to the panel content. + * @defaultValue "default" + */ + padding?: TabsContentVariantProps["padding"]; + /** Removes the default flex layout styles so the panel inherits no enforced layout. */ + unstyled?: true; + /** Value that pairs this panel with its trigger. */ + value: string; +} +/** + * A panel of content displayed when its paired tab is active. + * @param props - {@link TabsContentProps} + */ +declare const TabsContent: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +interface TabsListProps extends SlottablePropsWithRef<"div"> { + /** + * The visual hierarchy of the tabs. + * - "primary" - Default style with bottom-border indicators, used for the top-level sections of a view. + * - "secondary" - Pill-shaped tabs with a filled background, used to divide content within a primary section. + * - "tertiary" - Minimal, text-only style for optional or supplementary content. + * @defaultValue "primary" + */ + kind?: "primary" | "secondary" | "tertiary"; + /** + * Hides the chevron buttons rendered when the list overflows horizontally. + * @defaultValue false + */ + hideOverflowButtons?: boolean; + /** + * Restricts the visible triggers to the given child indices, inserting an ellipsis for each gap. For example, `[1,2,3,8,9,10]` shows items 1-3, an ellipsis, then 8-10. + */ + visibleRange?: number[]; + /** + * Internal prop. Removes all nv-tab classes from the component. + * @internal + */ + unstyled?: true; +} +/** + * The `role="tablist"` container that groups tab triggers and manages keyboard navigation between them. + * @param props - {@link TabsListProps} + */ +declare const TabsList: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +type TabsActivationMode = "automatic" | "manual"; +interface TabsRootProps extends PrimitivePropsWithRef<"div"> { + /** + * Whether tabs activate as keyboard focus moves to them, or only when Enter or Space is pressed. + * - "manual" - Arrow keys move focus; Enter or Space activates the focused tab. Use when switching panels is expensive. + * - "automatic" - Arrow keys both move focus and activate the focused tab. Use when switching is instant. + * @defaultValue "manual" + */ + activationMode?: TabsActivationMode; + /** Controlled active tab value. Pair with `onValueChange`. */ + value?: string; + /** Initial active tab value when uncontrolled. */ + defaultValue?: string; + /** Called when the active tab changes. */ + onValueChange?: (value: string) => void; + /** + * Set of tab values that have an associated panel mounted in the DOM. Used to wire `aria-controls` on triggers whose panel exists. + */ + panelValues?: Set; + /** + * Internal prop. Removes all nv-tab classes from the component. + * @internal + */ + unstyled?: true; +} +/** + * The outermost element of composed tabs. Establishes the active tab state and shares it with the list, triggers, and panels. + * @param props - {@link TabsRootProps} + */ +declare const TabsRoot: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +interface TabsTriggerProps extends SlottablePropsWithRef<"button"> { + /** + * Renders a hidden duplicate of the label sized to the bold weight so the trigger does not shift width when activated. + * @defaultValue true + */ + renderSpacingElement?: boolean; + /** Value that pairs this trigger with its panel. */ + value: string; + /** Disables the trigger so it cannot be activated or focused. */ + disabled?: boolean; +} +/** + * A `role="tab"` control that activates its paired panel when selected. + * @param props - {@link TabsTriggerProps} + */ +declare const TabsTrigger: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; +interface TabItem { + /** Renders the trigger into the element passed as `children` instead of a `