@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.50

package/dist/src/components/New/SchemaRenderer/components/SchemaAnyOfEditor.d.ts

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaAnyOfEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+    ariaLabel?: string;
+}
+/**
+ * Renders an `anyOf` schema field as a type select with the selected variant's editor.
+ * aliases: AnyOfSchemaEditor|SchemaUnionEditor
+ * Design system 2.0
+ *
+ * A `null` variant has no editor, so selecting it clears the value.
+ *
+ * @example
+ * ```tsx
+ * <SchemaAnyOfEditor
+ *   schema={{ anyOf: [{ type: 'null' }, { type: 'string' }] }}
+ *   value={null}
+ *   onChange={(v) => console.log(v)}
+ *   path={['field']}
+ *   level={1}
+ *   ariaLabel="Field"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition containing an `anyOf` array
+ * @param value - Current field value
+ * @param onChange - Called with the new value when the type or sub-value changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child field components
+ * @param [ariaLabel] - Accessible name of the type select and the variant's control
+ */
+export declare const SchemaAnyOfEditor: FC<SchemaAnyOfEditorProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaArrayEditor.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaArrayEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+}
+/**
+ * Renders a JSON Schema array as a list of collapsible items with add and remove controls.
+ * aliases: ArraySchemaEditor|SchemaListEditor
+ * Design system 2.0
+ *
+ * An item schema with a `discriminator` adds a type select next to the add
+ * button; the new item gets that variant's defaults.
+ *
+ * @example
+ * ```tsx
+ * <SchemaArrayEditor
+ *   schema={{ type: 'array', items: { type: 'string' } }}
+ *   value={['foo', 'bar']}
+ *   onChange={(v) => console.log(v)}
+ *   path={['tags']}
+ *   level={1}
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema array definition (must include an `items` sub-schema)
+ * @param value - Current array value
+ * @param onChange - Called with the updated array when items are added, removed, or changed
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child section components
+ */
+export declare const SchemaArrayEditor: FC<SchemaArrayEditorProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaField.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { SchemaFieldProps } from '../types';
+/**
+ * Renders a single schema property: a labelled field for a primitive, or a
+ * collapsible section for an object or an array.
+ * aliases: SchemaPropertyField|SchemaFormField
+ * Design system 2.0
+ *
+ * The label and the required error sit outside {@link SchemaFieldContent}, so
+ * a `renderField` override replaces the control and keeps both.
+ *
+ * @example
+ * ```tsx
+ * <SchemaField
+ *   schema={{ type: 'string' }}
+ *   value="hello"
+ *   onChange={(v) => console.log(v)}
+ *   path={['name']}
+ *   level={1}
+ *   required
+ *   label="Name"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition for this field
+ * @param value - Current field value
+ * @param onChange - Called with the updated value when the field changes
+ * @param path - Field path segments used for validation error tracking
+ * @param [level=0] - Nesting depth; object/array fields render as collapsible sections
+ * @param [required] - Whether the field is required (shows error when empty)
+ * @param [label] - Display label; falls back to schema title or path segment
+ */
+export declare const SchemaField: FC<SchemaFieldProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaFieldContent.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { SchemaFieldContentProps } from '../types';
+/**
+ * Routes a resolved schema to the editor that renders it.
+ * aliases: SchemaEditorRouter|SchemaContentDispatcher
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SchemaFieldContent
+ *   schema={{ type: 'string' }}
+ *   value="hello"
+ *   onChange={(v) => console.log(v)}
+ *   path={['name']}
+ *   level={1}
+ *   ariaLabel="Name"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition to render
+ * @param value - Current field value
+ * @param onChange - Called with the updated value when the field changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child editor components
+ * @param [required] - Whether the field is required (passed to primitive fields for error styling)
+ * @param [suppressInlineError=false] - Leaves the required error to the caller, which renders it under its own label
+ * @param [fieldId] - Id given to a primitive control, for a visible label to point at
+ * @param [ariaLabel] - Accessible name of the control
+ */
+export declare const SchemaFieldContent: FC<SchemaFieldContentProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaJsonEditor.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+export interface SchemaJsonEditorProps {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    id?: string;
+    ariaLabel?: string;
+}
+/**
+ * Edits a value the schema does not describe as raw JSON text: a key absent
+ * from the schema's `properties`, an object with no fixed properties, or a
+ * key-value entry switched to the object or array type.
+ * aliases: SchemaRawJsonEditor|SchemaUnknownPropertyEditor
+ * Design system 2.0
+ *
+ * A plain monospace {@link Textarea} rather than a code editor, so the form
+ * pulls in no editor bundle. The draft text is kept locally and `onChange`
+ * fires only once it parses.
+ *
+ * @example
+ * ```tsx
+ * <SchemaJsonEditor value={{ retries: 3 }} onChange={setValue} />
+ * ```
+ *
+ * @param value - The current value (any JSON type)
+ * @param onChange - Called with the parsed value whenever the edited text is valid JSON
+ * @param [id] - Id of the textarea, for a visible label to point at
+ * @param [ariaLabel] - Accessible name of the textarea
+ */
+export declare const SchemaJsonEditor: FC<SchemaJsonEditorProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaKeyValueEditor.d.ts

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaKeyValueEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+}
+/**
+ * Renders an `additionalProperties` object schema as an editable key-value list.
+ * aliases: KeyValueSchemaEditor|AdditionalPropertiesEditor
+ * Design system 2.0
+ *
+ * Primitive values render inline; object, `oneOf` and array values render as a
+ * collapsible section recursing back into `SchemaFieldContent`. With
+ * `additionalProperties: true` each entry also gets a type select, and an
+ * object or array entry is edited as raw JSON.
+ *
+ * @example
+ * ```tsx
+ * <SchemaKeyValueEditor
+ *   schema={{ type: 'object', additionalProperties: { type: 'string' } }}
+ *   value={{ foo: 'bar' }}
+ *   onChange={(v) => console.log(v)}
+ *   path={['metadata']}
+ *   level={1}
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema object definition with `additionalProperties`
+ * @param value - Current object value (treated as a key-value map)
+ * @param onChange - Called with the updated object when pairs are added, removed, or changed
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child section components
+ */
+export declare const SchemaKeyValueEditor: FC<SchemaKeyValueEditorProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaObjectEditor.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaObjectEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+}
+/**
+ * Renders the properties of a JSON Schema object as labelled form fields.
+ * aliases: ObjectSchemaEditor|SchemaPropertiesEditor
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SchemaObjectEditor
+ *   schema={{ type: 'object', properties: { name: { type: 'string' } } }}
+ *   value={{ name: 'Alice' }}
+ *   onChange={(v) => console.log(v)}
+ *   path={['config']}
+ *   level={1}
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema object definition
+ * @param value - Current object value
+ * @param onChange - Called with the updated object when any property changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child SchemaField instances
+ */
+export declare const SchemaObjectEditor: FC<SchemaObjectEditorProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaOneOfEditor.d.ts

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaOneOfEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+    ariaLabel?: string;
+}
+/**
+ * Renders a `oneOf` schema field as a type selector with the selected variant's editor.
+ * aliases: OneOfSchemaEditor|SchemaDiscriminatorEditor
+ * Design system 2.0
+ *
+ * The selector is a select by default, or a radio group with
+ * `discriminatorDisplay: 'radio'`. A column radio group reveals the variant's
+ * editor under its own option; a row one shows it below the whole row.
+ *
+ * @example
+ * ```tsx
+ * <SchemaOneOfEditor
+ *   schema={{ oneOf: [...], discriminator: { propertyName: 'type', mapping: {...} } }}
+ *   value={{ type: 'foo' }}
+ *   onChange={(v) => console.log(v)}
+ *   path={['config']}
+ *   level={1}
+ *   ariaLabel="Provider"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition containing a `oneOf` array and optional `discriminator`
+ * @param value - Current field value
+ * @param onChange - Called with the new value when the selected type or sub-value changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child editor components
+ * @param [ariaLabel] - Accessible name of the type selector; defaults to the select-type placeholder
+ */
+export declare const SchemaOneOfEditor: FC<SchemaOneOfEditorProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaPrimitiveField.d.ts

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaPrimitiveFieldProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    invalid?: boolean;
+    id?: string;
+    ariaLabel?: string;
+}
+/**
+ * Renders a single primitive schema field: string, integer, number, boolean, enum, or const.
+ * - `dial:resource` with `acceptableResourceTypes` → select over the live resource options
+ * - `isProtected: true` → masked password input
+ * - `enum` + `enumDisplay: 'radio'` → radio group (`enumOrientation: 'row'` lays it out horizontally)
+ * - `enum` without `enumDisplay` → select
+ * - `const` → disabled read-only input
+ * aliases: SchemaInputField|PrimitiveSchemaField
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SchemaPrimitiveField
+ *   schema={{ type: 'string', enum: ['a', 'b'], enumDisplay: 'radio', enumOrientation: 'row' }}
+ *   value="a"
+ *   onChange={(v) => console.log(v)}
+ *   ariaLabel="Mode"
+ * />
+ * ```
+ *
+ * @param schema - The resolved JSON Schema definition; supports `isProtected`, `enumDisplay`, `enumOrientation`
+ * @param value - Current field value
+ * @param onChange - Called with the new value when the field changes
+ * @param [invalid] - Whether the field has a validation error (applies error styling)
+ * @param [id] - Id of the control, for a visible label to point at
+ * @param [ariaLabel] - Accessible name of the control
+ */
+export declare const SchemaPrimitiveField: FC<SchemaPrimitiveFieldProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaSection.d.ts

@@ -0,0 +1,39 @@
+import { FC, ReactNode } from 'react';
+export interface SchemaSectionProps {
+    title: string;
+    description?: string;
+    summary?: string;
+    errorCount?: number;
+    level?: number;
+    children?: ReactNode;
+    onRemove?: () => void;
+    defaultExpanded?: boolean;
+    removeItemAriaLabel?: string;
+}
+/**
+ * A collapsible card wrapping a group of schema properties.
+ * aliases: CollapsibleSchemaSection|SchemaCard
+ * Design system 2.0
+ *
+ * Only the chevron and the title sit inside the toggle button. The info button
+ * and the remove button are its siblings, since a button nested in a button is
+ * invalid and its clicks would toggle the section too.
+ *
+ * @example
+ * ```tsx
+ * <SchemaSection title="Settings" level={0} summary="3/4 fields" errorCount={1}>
+ *   <p>Content</p>
+ * </SchemaSection>
+ * ```
+ *
+ * @param title - Section header title
+ * @param [description] - Explanatory text, exposed through an info button in the header
+ * @param [summary] - Short summary text shown in the header (e.g. "3/4 fields", "2 items")
+ * @param [errorCount=0] - Number of validation errors; shows an error count when > 0
+ * @param [level=0] - Nesting depth; 0 is the top-level card, 1+ the nested one
+ * @param [children] - Section body, mounted only while expanded
+ * @param [onRemove] - If provided, shows a remove button in the header
+ * @param [defaultExpanded=true] - Whether the section starts expanded
+ * @param [removeItemAriaLabel='Remove item'] - Accessible name of the remove button
+ */
+export declare const SchemaSection: FC<SchemaSectionProps>;

package/dist/src/components/New/SchemaRenderer/context.d.ts

@@ -0,0 +1,8 @@
+import { SchemaRendererContextValue } from './types';
+export declare const SchemaRendererContext: import('react').Context<SchemaRendererContextValue | null>;
+export declare const useSchemaContext: () => SchemaRendererContextValue;
+/**
+ * Whether a path, or any path under it, has been touched. Every field counts as
+ * touched while `skipUntouched` is off, so errors show from the first render.
+ */
+export declare const isPathTouched: (path: string, touchedPaths?: ReadonlySet<string>, skipUntouched?: boolean, includeDescendants?: boolean) => boolean;

package/dist/src/components/New/SchemaRenderer/types.d.ts

@@ -0,0 +1,76 @@
+import { ReactElement, ReactNode } from 'react';
+import { JsonSchema, JsonSchemaDef, SchemaRendererTexts } from '../../../models/json-schema';
+import { SchemaRendererVariant } from '../../../types/json-schema';
+export type SchemaRenderField = (path: string[], schema: JsonSchemaDef, defaultElement: ReactElement) => ReactNode;
+export interface SchemaRendererProps {
+    schema: JsonSchema;
+    defaultValue?: Record<string, unknown>;
+    texts?: Partial<SchemaRendererTexts>;
+    className?: string;
+    readonly?: boolean;
+    defaultExpanded?: boolean;
+    /** Additional classes for the container of every text, number and select field. */
+    inputClassName?: string;
+    /**
+     * `Sections` (default) — every top-level property is a collapsible section card.
+     * `Flat` — primitive top-level properties render as labelled fields; object and
+     * array properties still use collapsible sections.
+     * `FlatSections` — every top-level property renders under a plain heading.
+     */
+    variant?: SchemaRendererVariant;
+    /**
+     * When `true`, required-field errors are only shown after the user has interacted
+     * with a field. When `false` (default), all unfilled required fields are highlighted immediately.
+     */
+    skipUntouched?: boolean;
+    /**
+     * Live resource options for schema properties flagged with `dial:resource: true`.
+     * Keyed by the resource type name referenced in a property's `acceptableResourceTypes`
+     * array; each value provides the selectable entries for that resource type (a string
+     * array for string-typed properties).
+     */
+    acceptableResourceTypes?: Record<string, unknown>;
+    onChange?: (value: Record<string, unknown>) => void;
+    onPropertyChange?: (path: string, value: unknown) => void;
+    onDefaultValues?: (value: Record<string, unknown>) => void;
+    /**
+     * Override the rendered element for any field by path. The field's label and
+     * error stay outside the element, so an override replaces the control only.
+     * Return `defaultElement` to fall back to the built-in renderer.
+     * @param path - Array of schema property keys leading to this field (e.g. ['connection', 'token'])
+     * @param schema - The resolved JSON Schema definition for this field
+     * @param defaultElement - The element that would be rendered without customization
+     */
+    renderField?: SchemaRenderField;
+}
+export interface SchemaFieldContentProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+    required?: boolean;
+    suppressInlineError?: boolean;
+    /** The id given to a primitive control, so a visible label can point at it. */
+    fieldId?: string;
+    /**
+     * Accessible name for the control. Sections, array items and key-value rows
+     * have no visible label next to their control, so this is what names it.
+     */
+    ariaLabel?: string;
+}
+export interface SchemaFieldProps extends Omit<SchemaFieldContentProps, 'fieldId' | 'ariaLabel' | 'suppressInlineError'> {
+    label?: string;
+}
+export interface SchemaRendererContextValue {
+    rootSchema: JsonSchema;
+    texts: SchemaRendererTexts;
+    readonly?: boolean;
+    defaultExpanded?: boolean;
+    inputClassName?: string;
+    acceptableResourceTypes?: Record<string, unknown>;
+    renderField?: SchemaRenderField;
+    touchedPaths?: ReadonlySet<string>;
+    markTouched?: (path: string) => void;
+    skipUntouched?: boolean;
+}

package/dist/src/components/New/Select/CollapsedSelectTags.d.ts

@@ -0,0 +1,22 @@
+import { FC, MouseEvent } from 'react';
+import { SelectOption } from '../../../models/select';
+export interface CollapsedSelectTagsProps {
+    options: SelectOption[];
+    selectedValues: string[];
+    handleRemoveTag: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
+}
+/**
+ * The selected tags of a multi-select on a single row. The tags that do not fit
+ * the width of the field collapse into a `+N` counter whose hover panel lists
+ * them, each still removable.
+ * Design system 2.0
+ *
+ * The count follows the width the field has, not the number of tags: every tag
+ * is measured in a hidden copy of the row, so the tags that stay visible are
+ * the ones that fit beside the counter, and the count follows a resize.
+ *
+ * @param options - All available options, used to resolve labels and icons
+ * @param selectedValues - Values currently selected
+ * @param handleRemoveTag - Called with the value whose tag was removed
+ */
+export declare const CollapsedSelectTags: FC<CollapsedSelectTagsProps>;

package/dist/src/components/New/Select/MultiSelectTags.d.ts

@@ -1,9 +1,13 @@
 import { FC, MouseEvent } from 'react';
 import { SelectOption } from '../../../models/select';
+/** Geometry shared by every tag of a multi-select field, and its `+N` counter. */
+export declare const selectTagClassName = "h-[24px] max-w-full rounded-md border border-secondary bg-layer-sunken px-2";
 export interface MultiSelectTagsProps {
     options: SelectOption[];
     selectedValues: string[];
     handleRemoveTag?: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
+    /** Additional classes for every tag. */
+    tagClassName?: string;
 }
 /**
  * The selected values of a multi-select, rendered as removable tags inside the
@@ -13,5 +17,6 @@ export interface MultiSelectTagsProps {
  * @param options - All available options, used to resolve labels and icons
  * @param selectedValues - Values currently selected
  * @param [handleRemoveTag] - Called with the value whose tag was removed; when omitted the tags are not removable
+ * @param [tagClassName] - Additional classes for every tag
  */
 export declare const MultiSelectTags: FC<MultiSelectTagsProps>;

package/dist/src/components/New/Select/Select.d.ts

@@ -22,6 +22,14 @@ export interface SelectProps {
     searchPlaceholder?: string;
     selectAll?: boolean;
     selectAllLabel?: string;
+    /**
+     * Keeps a multi-select's tags on one row, folding the ones that do not fit
+     * into a `+N` counter whose hover panel lists them (as `TagInput` does with
+     * the same prop). Without it the tags wrap and the field grows.
+     * Ignored with `customMultiSelectTagsRenderer`, and on a mobile screen, where
+     * the hover panel is unavailable and the tags wrap instead.
+     */
+    collapseTagOverflow?: boolean;
     /**
      * How the chosen option is marked in single mode. The design tints the row
      * (`Tint`, the default); `Check` puts a trailing check on it instead, the
@@ -98,6 +106,7 @@ export interface SelectProps {
  * @param [searchPlaceholder] - Placeholder for the overlay search input.
  * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
  * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.
+ * @param [collapseTagOverflow=false] - Keep a multi-select's tags on one row, folding those that do not fit into a `+N` counter by the width available; the hover panel lists them and removes them.
  * @param [selectedOptionMark=MenuItemMark.Tint] - How the chosen option is marked in single mode.
  * @param [emptyStateTitle="No options available"] - Title text when there are no options.
  * @param [emptyStateDescription] - Description text when there are no options.

package/dist/src/components/New/Select/constants.d.ts

@@ -20,9 +20,10 @@ export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]
  * 344px — not the panel around them, so the search row and Select All stay
  * put while the list moves under them. The panel keeps its own cap on the
  * available viewport height, which takes over on a screen too short for this
- * one.
+ * one. `py-1` matches the Dropdown menu's list inset, so the first and last
+ * rows (and their focus ring) do not sit flush against the panel edge.
  */
-export declare const selectOptionsScrollClassName = "max-h-[344px] overflow-y-auto";
+export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */

package/dist/src/components/New/SharedEntityIndicator/SharedEntityIndicator.d.ts

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+/** Props for `SharedEntityIndicator`. */
+export interface SharedEntityIndicatorProps {
+    /** Accessible name of the badge. */
+    label?: string;
+    /** Tooltip shown while the badge is hovered. */
+    tooltip?: ReactNode;
+    /** Arrow size in px. */
+    size?: number;
+    /** Additional CSS classes for the badge, e.g. to position it over an icon. */
+    className?: string;
+}
+/**
+ * A small arrow badge marking an entity as shared.
+ * aliases: SharedIcon|AccessIndicator
+ * Design system 2.0
+ *
+ * A `role="img"` named by `label`, so it can stand on its own. Placed inside a
+ * larger `role="img"` — as `FileIcon` does — its name is folded into the
+ * parent's, which is why `FileIcon` names the shared state itself. The tooltip
+ * is a pointer-only hint: the badge is not focusable, and the tooltip never
+ * reaches assistive technology, so `label` is what carries the meaning.
+ *
+ * @example
+ * ```tsx
+ * <SharedEntityIndicator />
+ * <SharedEntityIndicator tooltip="Shared with 3 people" className="absolute -bottom-0.5 -left-0.5" />
+ * ```
+ *
+ * @param [label='Shared'] - Accessible name of the badge
+ * @param [tooltip='Shared'] - Tooltip shown while the badge is hovered
+ * @param [size=12] - Arrow size in px
+ * @param [className] - Additional CSS classes for the badge
+ */
+export declare const SharedEntityIndicator: FC<SharedEntityIndicatorProps>;

package/dist/src/components/New/SideDrawer/SideDrawer.d.ts

@@ -0,0 +1,100 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+/** Props for `SideDrawer`. */
+export interface SideDrawerProps {
+    /** Whether the drawer is open. */
+    open: boolean;
+    /** Called when the drawer asks to close: the close button, Escape, or a press on the backdrop. */
+    onClose: () => void;
+    /** Header title. A string also names the dialog; a node needs `ariaLabel`. */
+    header?: ReactNode;
+    /** Accessible name of the drawer when `header` is not a string. */
+    ariaLabel?: string;
+    /** Controls placed in the header between the title and the close button. */
+    headerActions?: ReactNode;
+    /** Shows a back button at the start of the header when set. */
+    onBack?: () => void;
+    /** Accessible name of the back button. */
+    backAriaLabel?: string;
+    /** Whether the back button is disabled. */
+    backDisabled?: boolean;
+    /** Accessible name of the close button. */
+    closeAriaLabel?: string;
+    /** Whether the close button is disabled, e.g. while a submission is in flight. */
+    closeDisabled?: boolean;
+    /** Whether the header's close button is left out. */
+    hideClose?: boolean;
+    /** Whether a press on the backdrop closes the drawer. */
+    closeOnOutsideClick?: boolean;
+    /** Content of the drawer, scrolled when it is taller than the viewport. */
+    children?: ReactNode;
+    /** Additional CSS classes for the drawer panel, e.g. a different desktop width. */
+    className?: string;
+    /** Additional CSS classes for the backdrop. */
+    overlayClassName?: string;
+    /** Additional CSS classes for the header row. */
+    headerClassName?: string;
+    /**
+     * Inline style for the panel. It renders in a portal, so this is how custom
+     * properties reach the panel and its content.
+     */
+    style?: CSSProperties;
+    /** Inline style for the backdrop, merged after its own positioning. */
+    overlayStyle?: CSSProperties;
+    /** Additional CSS classes for the scrolling body. */
+    bodyClassName?: string;
+    /** Type-scale class for a string title, replacing its own. */
+    titleClassName?: string;
+    /** Id of the element to portal into, instead of the end of `<body>`. */
+    portalId?: string;
+}
+/**
+ * A full-height panel that slides in from the inline end over a dimmed page.
+ * aliases: Drawer|SidePanel|SideSheet|DetailsPanel
+ * Design system 2.0
+ *
+ * It is a modal dialog while open: focus moves to the panel and stays inside,
+ * returns to where it came from on close, and the page behind it does not
+ * scroll. Escape, the close button and a press on the backdrop all call
+ * `onClose`; the drawer stays controlled by `open`.
+ *
+ * The panel stays mounted while closed, so it can slide out as well as in and
+ * keep the state of whatever it holds. Closed, it is `inert` — out of both
+ * the tab order and the accessibility tree — and the backdrop lets pointer
+ * events through. On desktop the drawer is 540px wide with a rounded,
+ * bordered leading edge; on mobile it takes the full width. It slides from
+ * the end in either direction, and not at all under `prefers-reduced-motion`.
+ *
+ * The header follows `Popup`: an optional back button, the title,
+ * `headerActions`, and the close button. A string `header` renders an `<h2>`
+ * that names the dialog; for a node, pass `ariaLabel`.
+ *
+ * @example
+ * ```tsx
+ * <SideDrawer open={isOpen} header="Publish" onClose={() => setIsOpen(false)}>
+ *   <PublishForm />
+ * </SideDrawer>
+ * ```
+ *
+ * @param open - Whether the drawer is open
+ * @param onClose - Called when the drawer asks to close
+ * @param [header] - Header title; a string also names the dialog
+ * @param [ariaLabel] - Accessible name when `header` is not a string
+ * @param [headerActions] - Controls between the title and the close button
+ * @param [onBack] - Shows a back button at the start of the header
+ * @param [backAriaLabel='Back'] - Accessible name of the back button
+ * @param [backDisabled=false] - Whether the back button is disabled
+ * @param [closeAriaLabel='Close'] - Accessible name of the close button
+ * @param [closeDisabled=false] - Whether the close button is disabled
+ * @param [hideClose=false] - Whether the close button is left out
+ * @param [closeOnOutsideClick=true] - Whether a press on the backdrop closes the drawer
+ * @param [children] - Content of the drawer
+ * @param [className] - Additional CSS classes for the drawer panel
+ * @param [overlayClassName] - Additional CSS classes for the backdrop
+ * @param [headerClassName] - Additional CSS classes for the header row
+ * @param [style] - Inline style for the panel, e.g. custom properties
+ * @param [overlayStyle] - Inline style for the backdrop
+ * @param [bodyClassName] - Additional CSS classes for the scrolling body
+ * @param [titleClassName] - Type-scale class for a string title
+ * @param [portalId] - Id of the element to portal into
+ */
+export declare const SideDrawer: FC<SideDrawerProps>;