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

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>;

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

@@ -1,4 +1,4 @@
-import { FC, InputHTMLAttributes } from 'react';
+import { FC, InputHTMLAttributes, ReactNode } from 'react';
 import { LabelProps } from '../Label/Label';
 type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'size'>;
 export interface SliderProps extends NativeInputProps {
@@ -14,6 +14,21 @@ export interface SliderProps extends NativeInputProps {
     formatValue?: (value: number) => string;
     /** Renders the current value at the end of the label row */
     showValue?: boolean;
+    /** Renders the current value in a bubble above the thumb */
+    showTooltip?: boolean;
+    /** Renders a tick mark at every value the thumb can snap to */
+    showTicks?: boolean;
+    /** Content before the track, e.g. an icon */
+    leftContent?: ReactNode;
+    /** Content after the track, e.g. a `NumberInput` or the formatted value */
+    rightContent?: ReactNode;
+    /**
+     * Renders a compact, 24px `NumberInput` after the track, synced with the slider:
+     * typing clamps to `min`/`max` and snaps to `step`. Takes the place of `rightContent`.
+     */
+    showValueInput?: boolean;
+    /** Accessible name of the value input; defaults to a string `labelProps.label` */
+    valueInputAriaLabel?: string;
     caption?: string;
     error?: string;
     onChange?: (value: number) => void;
@@ -39,6 +54,13 @@ export interface SliderProps extends NativeInputProps {
  * />
  * ```
  *
+ * With `showTooltip` the value sits in a bubble above the thumb, and with
+ * `showTicks` the track marks every value the thumb snaps to — the discrete
+ * slider of the design. `leftContent` and `rightContent` are the container's
+ * side slots, centred on the track: an icon on the left, a `NumberInput` or the
+ * formatted value on the right. The kit does not wire a `NumberInput` to the
+ * slider; the caller passes both the same `value` and `onChange`.
+ *
  * Built on a native `<input type="range">`, so the browser owns the drag, the
  * arrow / Home / End steps, touch and the writing direction. Only the thumb is
  * restyled; the track and its fill are separate elements so the fill can be
@@ -58,6 +80,12 @@ export interface SliderProps extends NativeInputProps {
  * @param [labels] - 2 or 3 strings rendered below the track (start, [middle,] end)
  * @param [formatValue] - Custom formatter for the displayed value; also becomes the announced `aria-valuetext`
  * @param [showValue=false] - Renders the current value at the end of the label row
+ * @param [showTooltip=false] - Renders the current value in a bubble above the thumb; hidden while disabled
+ * @param [showTicks=false] - Renders a tick mark at every step on the unfilled track; hidden while disabled
+ * @param [leftContent] - Content before the track, vertically centred on it
+ * @param [rightContent] - Content after the track, vertically centred on it
+ * @param [showValueInput=false] - Renders a compact (24px), synced `NumberInput` after the track (clamped to `min`/`max`, snapped to `step`); replaces `rightContent`
+ * @param [valueInputAriaLabel] - Accessible name of the value input; defaults to a string `labelProps.label`
  * @param [caption] - Helper text rendered below the track, and described by the slider
  * @param [error] - Error message rendered below the track; replaces the caption
  * @param [onChange] - Callback fired with the new value

package/dist/src/components/New/Slider/utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Percent positions of the ticks: one per step after `min`, so a 0–1 slider at
+ * 0.1 gets exactly 10. `min` itself has no tick — it is always under the thumb
+ * or the fill. A step that does not divide the range stops short of `max`, the
+ * way the native range input does.
+ */
+export declare const getTickPercents: (range: number, step: number) => number[];
+/** Number of decimals in a step, e.g. 2 for 0.05. */
+export declare const getStepPrecision: (step: number) => number;
+/**
+ * Clamps a typed value into `[min, max]` and snaps it to the nearest step, the
+ * same values the range thumb can take.
+ */
+export declare const snapToStep: (value: number, min: number, max: number, step: number) => number;

package/dist/src/components/New/Slider/utils.spec.d.ts

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

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

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
+import { TabOrientation } from '../../../types/tab';
 /** A single tab entry rendered by {@link Tabs}. */
 export interface TabItem {
     /** Unique identifier used to match against `activeTabId`. */
@@ -7,6 +8,8 @@ export interface TabItem {
     label: string;
     /** Optional numeric badge rendered after the label. */
     count?: number;
+    /** Decorative icon rendered before the label. The label names the tab, so the icon is hidden from assistive tech. */
+    icon?: ReactNode;
     /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
     disabled?: boolean;
 }
@@ -17,19 +20,35 @@ export interface TabsProps {
     activeTabId: string;
     /** Fired with the tab's `id` when the user selects a tab. */
     onTabChange: (tabId: string) => void;
+    /** Layout direction of the tab list. Uses the {@link TabOrientation} enum. Defaults to `TabOrientation.Horizontal`. */
+    orientation?: TabOrientation;
+    /**
+     * Already-translated heading rendered above the tabs, which also names the
+     * tab list. Omit to render no heading.
+     */
+    sectionLabel?: string;
     /**
      * Accessible name for the tab list. A row of tabs carries no name of its own,
-     * so screen readers announce it as an unlabelled list without this.
+     * so screen readers announce it as an unlabelled list without this — unless
+     * `sectionLabel` is naming it already.
      */
     ariaLabel?: string;
-    /** Additional CSS classes for the tab list container. */
+    /** Additional CSS classes for the root element. */
     className?: string;
+    /**
+     * Additional CSS classes for the `role="tablist"`. `className` reaches it
+     * only when there is no `sectionLabel`, since the heading wrapper is then
+     * the root; this prop reaches it in either case.
+     */
+    tabListClassName?: string;
     /** Additional CSS classes applied to every tab. */
     tabClassName?: string;
+    /** Additional CSS classes for the `sectionLabel` heading. */
+    sectionLabelClassName?: string;
 }
 /**
- * A horizontal row of tabs, underlining the active one and showing optional count badges.
- * aliases: TabRow|TabNavigation|TabBar
+ * A row or rail of tabs, marking the active one and showing optional icons and count badges.
+ * aliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav
  * Design system 2.0
  *
  * Follows the ARIA tabs pattern with automatic activation: only the active tab is
@@ -38,6 +57,16 @@ export interface TabsProps {
  * Tabs marked `disabled` are greyed out, cannot be clicked, and are skipped by
  * keyboard navigation.
  *
+ * `TabOrientation.Horizontal` draws the default row: the active tab takes a
+ * gradient underline, and `ArrowLeft` / `ArrowRight` move along it.
+ * `TabOrientation.Vertical` draws the settings-page rail instead — full-width
+ * rows with the active one on a tinted pill rather than an underline, driven by
+ * `ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs
+ * label whole pages of a settings surface; the row, when they filter one.
+ *
+ * `className` lands on whichever element is outermost: the heading wrapper when
+ * `sectionLabel` is set, the `role="tablist"` itself when it is not.
+ *
  * The component renders the tabs only; the panels stay with the consumer.
  *
  * @example
@@ -53,11 +82,30 @@ export interface TabsProps {
  * />
  * ```
  *
+ * @example A settings rail, named by its own heading.
+ * ```tsx
+ * <Tabs
+ *   orientation={TabOrientation.Vertical}
+ *   sectionLabel={t('Settings')}
+ *   className="w-[240px] shrink-0 border-e border-e-tertiary"
+ *   tabs={[
+ *     { id: 'preferences', label: t('Preferences'), icon: <IconSettings size={18} /> },
+ *     { id: 'usage', label: t('Usage'), icon: <IconChartBar size={18} /> },
+ *   ]}
+ *   activeTabId={activeTabId}
+ *   onTabChange={setActiveTabId}
+ * />
+ * ```
+ *
  * @param tabs - Ordered list of tabs to render.
  * @param activeTabId - ID of the currently selected tab.
  * @param onTabChange - Fired with the tab's `id` when the user selects a tab.
+ * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tab list.
+ * @param [sectionLabel] - Heading rendered above the tabs, which also names the tab list.
  * @param [ariaLabel] - Accessible name for the tab list.
- * @param [className] - Additional CSS classes for the tab list container.
+ * @param [className] - Additional CSS classes for the root element.
+ * @param [tabListClassName] - Additional CSS classes for the `role="tablist"`.
  * @param [tabClassName] - Additional CSS classes applied to every tab.
+ * @param [sectionLabelClassName] - Additional CSS classes for the `sectionLabel` heading.
  */
 export declare const Tabs: FC<TabsProps>;

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

@@ -19,8 +19,10 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit above popups, dropdowns and the calendar (all `z-[53]`), since
- * they can be triggered by a control inside one of them.
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
+ * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * (`z-floating`) and interactive tooltips — since they can be triggered by a
+ * control inside any of them.
  *
  * `max-w-[376px]` is the cap the design puts on a tooltip: at `dial-small-text`
  * that is around 60 characters a line, past which a line stops being
@@ -36,4 +38,4 @@ export declare const arrowClassName = "fill-control-inverted";
  * nothing to see around a 7px triangle that the box's own shadow does not
  * already carry.
  */
-export declare const tooltipClassName = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
+export declare const tooltipClassName = "z-tooltip max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";

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

@@ -0,0 +1,139 @@
+import { FC } from 'react';
+import { TransferQueueItemStatus } from '../../../types/transfer-queue';
+/** One file (or other named unit of work) tracked by a `TransferQueue`. */
+export interface TransferQueueItem {
+    /** Stable identifier, passed back to `onCancelItem`. */
+    id: string;
+    /** Name shown on the row; a file's extension also picks its `FileIcon` glyph. */
+    name: string;
+    /** Current lifecycle status. */
+    status: TransferQueueItemStatus;
+    /**
+     * Completion as 0–100. Feeds only the aggregate bar shown while the queue
+     * is collapsed; a settled item without one counts as 100, a running one as 0.
+     */
+    percent?: number;
+    /**
+     * Why a `Failed` or `Warning` item ended as it did. Shown as the status
+     * icon's tooltip and used as its accessible name; falls back to
+     * `labels.failedMessage` / `labels.warningMessage`.
+     */
+    message?: string;
+}
+/** Every user-visible string of `TransferQueue`. */
+export interface TransferQueueLabels {
+    /** Accessible name of an in-progress row's cancel control. */
+    cancelItemAriaLabel: (name: string) => string;
+    /** Accessible name of an in-progress row's spinner. */
+    itemProgressAriaLabel: (name: string) => string;
+    /** Accessible name of a succeeded row's check icon. */
+    successLabel: string;
+    /** Trailing text on a canceled row. */
+    canceledLabel: string;
+    /** Fallback reason for a failed item without its own `message`. */
+    failedMessage: string;
+    /** Fallback reason for a warned item without its own `message`. */
+    warningMessage: string;
+    /** Accessible name of the collapsed queue's aggregate progress bar. */
+    queueProgressAriaLabel: string;
+    /**
+     * The aggregate bar's `aria-valuetext`. Given settled and total counts
+     * rather than a percentage, because "3 of 10 files" reads better than "36%"
+     * when the work is a list of files.
+     */
+    queueProgressValueText: (completed: number, total: number) => string;
+    /** Accessible name of the collapse toggle while expanded. */
+    collapseAriaLabel: string;
+    /** Accessible name of the expand toggle while collapsed. */
+    expandAriaLabel: string;
+    /** Accessible name of the close control. */
+    closeAriaLabel: string;
+    /** Heading of the close-confirmation dialog. */
+    closeConfirmHeader: string;
+    /** Confirmation description when an item is in progress and none failed. */
+    closeConfirmDescriptionInProgress: string;
+    /** Confirmation description when an item failed and none is in progress. */
+    closeConfirmDescriptionFailed: string;
+    /** Confirmation description when items are both in progress and failed. */
+    closeConfirmDescriptionMixed: string;
+    /** Confirm button of the close-confirmation dialog. */
+    closeConfirmLabel: string;
+    /** Cancel button of the close-confirmation dialog. */
+    closeCancelLabel: string;
+}
+/** Props for `TransferQueue`. */
+export interface TransferQueueProps {
+    /**
+     * Heading, rendered verbatim. The host composes any count into it
+     * (e.g. "Importing 5 files"); the component never pluralizes.
+     */
+    title: string;
+    /** Items to show, in display order. The queue renders nothing when empty. */
+    items: TransferQueueItem[];
+    /**
+     * Called when the queue should close — from the close control (after a
+     * confirmation while work is in progress or a failure is unread), or by
+     * itself once every item has succeeded.
+     */
+    onClose: () => void;
+    /**
+     * Called with an item's id when the user cancels it. The host aborts the
+     * work and keeps the item in `items` with status `Canceled`. Without it,
+     * in-progress rows show a spinner only.
+     */
+    onCancelItem?: (id: string) => void;
+    /** Overrides for the English default strings. */
+    labels?: Partial<TransferQueueLabels>;
+    /**
+     * Milliseconds after every item succeeded before `onClose` is called by
+     * itself. Defaults to 8000; `0` or less disables it.
+     */
+    autoCloseDelay?: number;
+    /** Additional CSS classes for the root panel. */
+    className?: string;
+    /** Additional CSS classes for the scrollable list of rows. */
+    bodyClassName?: string;
+}
+/**
+ * A floating panel listing the files of an upload, download, import or export
+ * with a live status per row.
+ * aliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast
+ * Design system 2.0
+ *
+ * Each row shows the file's `FileIcon` and name, and a trailing status: a
+ * spinner (with a cancel control on hover or focus) while in progress, a check
+ * on success, a warning or error icon whose reason is both its tooltip and its
+ * accessible name, or "Canceled". The header carries the host's title, a count
+ * of failed items, and collapse and close controls. Collapsed while work runs,
+ * the rows are replaced by one aggregate `ProgressBar`.
+ *
+ * Closing while an item is in progress or has failed asks for confirmation
+ * first. Once every item has succeeded the queue closes itself after
+ * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
+ *
+ * The root is a polite `role="status"` live region. Positioning is left to
+ * the host — wrap it in a fixed container at the screen corner.
+ *
+ * @example
+ * ```tsx
+ * <TransferQueue
+ *   title="Importing 2 files"
+ *   items={[
+ *     { id: '1', name: 'report.pdf', status: TransferQueueItemStatus.Success },
+ *     { id: '2', name: 'data.csv', status: TransferQueueItemStatus.InProgress, percent: 40 },
+ *   ]}
+ *   onClose={handleClose}
+ *   onCancelItem={handleCancel}
+ * />
+ * ```
+ *
+ * @param title - Heading, rendered verbatim
+ * @param items - Items to show, in display order
+ * @param onClose - Called when the queue should close
+ * @param [onCancelItem] - Called with an item's id when the user cancels it
+ * @param [labels] - Overrides for the English default strings
+ * @param [autoCloseDelay=8000] - Delay before an all-succeeded queue closes itself; `0` disables
+ * @param [className] - Additional CSS classes for the root panel
+ * @param [bodyClassName] - Additional CSS classes for the list of rows
+ */
+export declare const TransferQueue: FC<TransferQueueProps>;

package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TransferQueueLabels } from './TransferQueue';
+interface TransferQueueHeaderProps {
+    title: string;
+    /** The badge renders only when this is positive. */
+    failedCount: number;
+    isCollapsed: boolean;
+    /** Id of the rows container the collapse toggle controls. */
+    itemsId: string;
+    labels: TransferQueueLabels;
+    onToggleCollapse: () => void;
+    onClose: () => void;
+}
+/** Queue heading with its failed-item badge and the collapse and close controls. */
+export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
+export {};

package/dist/src/components/New/TransferQueue/TransferQueueRow.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TransferQueueItem, TransferQueueLabels } from './TransferQueue';
+interface TransferQueueRowProps {
+    item: TransferQueueItem;
+    labels: TransferQueueLabels;
+    onCancel?: (id: string) => void;
+}
+/** One queue row: the file's icon and name, plus a trailing status slot. */
+export declare const TransferQueueRow: FC<TransferQueueRowProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import { TransferQueueLabels } from './TransferQueue';
+/** Delay before a queue whose items have all succeeded closes itself. */
+export declare const TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS = 8000;
+export declare const STATUS_SLOT_CLASS = "flex size-7 shrink-0 items-center justify-center";
+/** English defaults for every `TransferQueue` string; a host passes translations through `labels`. */
+export declare const DEFAULT_TRANSFER_QUEUE_LABELS: TransferQueueLabels;

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

@@ -5,6 +5,11 @@
  */
 /** The floating panel itself: rounded raised card with a one-unit inset. */
 export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 shadow-md";
+/**
+ * Stacks the rows of a menu or option list with a 2px gap, so the tints of
+ * adjacent selected and hovered rows read as separate rows instead of one block.
+ */
+export declare const overlayListClassName = "flex flex-col gap-0.5";
 /**
  * A nested panel opened from a row of the surface above it. It is the same
  * object as its parent panel, so it reads from `overlaySurfaceClassName` too —
@@ -12,6 +17,14 @@ export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 s
  * rather than by the trigger further up.
  */
 export declare const overlaySubMenuClassName: string;
+/**
+ * A submenu panel that lists kit-rendered rows. The top-level menu and option
+ * list wrap their rows in `py-1` inside the panel's `p-1`; a submenu renders
+ * its rows straight into the panel, so it takes the same total vertical inset
+ * here. A caller-rendered submenu body keeps the plain panel, as a
+ * `renderOverlay` body does at the top level.
+ */
+export declare const overlaySubMenuListClassName: string;
 /**
  * A selectable row inside the panel. Keeps a visible focus ring: these rows are
  * reached by keyboard, and the 1.0 versions suppressed the ring outright.

package/dist/src/components/Popup/constants.d.ts

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../types/popup';
-export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
+export declare const overlayBaseClassName = "z-popup flex items-center justify-center bg-blackout md:p-4";
 export declare const popupDividerClassName = "divide-tertiary divide-y";
 export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;

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

@@ -1,87 +1,10 @@
 import { default as React } from 'react';
 import { EditorThemes } from '../../types/editor';
-export declare enum SchemaRendererVariant {
-    Sections = "sections",
-    Flat = "flat",
-    FlatSections = "flat-sections"
-}
-export declare enum SchemaDisplayMode {
-    Select = "select",
-    Radio = "radio"
-}
-export declare enum SchemaOrientation {
-    Row = "row",
-    Column = "column"
-}
-export declare enum JsonSchemaType {
-    String = "string",
-    Number = "number",
-    Integer = "integer",
-    Boolean = "boolean",
-    Object = "object",
-    Array = "array",
-    Null = "null"
-}
-export interface DialMeta {
-    'dial:propertyOrder'?: number;
-    [key: string]: unknown;
-}
-export interface JsonSchemaDef {
-    $ref?: string;
-    type?: string | string[];
-    title?: string;
-    description?: string;
-    isHidden?: boolean;
-    isProtected?: boolean;
-    enumDisplay?: SchemaDisplayMode;
-    enumOrientation?: SchemaOrientation;
-    discriminatorDisplay?: SchemaDisplayMode;
-    discriminatorOrientation?: SchemaOrientation;
-    default?: unknown;
-    const?: unknown;
-    enum?: unknown[];
-    properties?: Record<string, JsonSchemaDef>;
-    required?: string[];
-    items?: JsonSchemaDef;
-    oneOf?: JsonSchemaDef[];
-    anyOf?: JsonSchemaDef[];
-    allOf?: JsonSchemaDef[];
-    discriminator?: {
-        propertyName: string;
-        mapping: Record<string, string>;
-    };
-    'dial:meta'?: DialMeta;
-    'dial:resource'?: boolean;
-    acceptableResourceTypes?: string[];
-    [key: string]: unknown;
-}
-export interface JsonSchema extends JsonSchemaDef {
-    $defs?: Record<string, JsonSchemaDef>;
-}
-export interface ValidationError {
-    path: string;
-    message: string;
-}
-export interface SchemaRendererTexts {
-    noItemSchema: string;
-    noItemsYet: string;
-    addItem: string;
-    selectTypeToAdd: string;
-    noConfigurableProperties: string;
-    noFieldsYet: string;
-    keyColumnHeader: string;
-    valueColumnHeader: string;
-    addField: string;
-    keyInputPlaceholder: string;
-    stringInputPlaceholder: string;
-    integerInputPlaceholder: string;
-    numberInputPlaceholder: string;
-    enumSelectPlaceholder: string;
-    selectTypePlaceholder: string;
-    removeItemAriaLabel: string;
-    removeFieldAriaLabel: string;
-}
-export declare const DEFAULT_SCHEMA_TEXTS: SchemaRendererTexts;
+import { SchemaRendererVariant } from '../../types/json-schema';
+import { JsonSchema, JsonSchemaDef, SchemaRendererTexts } from '../../models/json-schema';
+export { SchemaRendererVariant, SchemaDisplayMode, SchemaOrientation, JsonSchemaType, } from '../../types/json-schema';
+export type { DialMeta, JsonSchemaDef, JsonSchema, ValidationError, SchemaRendererTexts, } from '../../models/json-schema';
+export { DEFAULT_SCHEMA_TEXTS } from '../../constants/schema-renderer';
 export interface DialSchemaRendererProps {
     schema: JsonSchema;
     defaultValue?: Record<string, unknown>;

package/dist/src/components/SchemaRenderer/utils.d.ts

@@ -1,13 +1 @@
-import { JsonSchema, JsonSchemaDef, ValidationError } from './types';
-export declare function resolveRef(schema: JsonSchemaDef, rootSchema: JsonSchema, depth?: number): JsonSchemaDef;
-export declare function sortByPropertyOrder(entries: [string, JsonSchemaDef][]): [string, JsonSchemaDef][];
-export declare function isMissingRequiredValue(value: unknown): boolean;
-export declare function isObjectType(schema: JsonSchemaDef): boolean;
-export declare function toFieldLabel(key: string): string;
-export declare function getOptionLabel(schema: JsonSchemaDef, rootSchema: JsonSchema): string;
-export declare function extractDefaults(schema: JsonSchemaDef, rootSchema: JsonSchema, depth?: number): unknown;
-export declare function validateRequired(value: unknown, schema: JsonSchemaDef, rootSchema: JsonSchema, path?: string, depth?: number): ValidationError[];
-export declare function buildSummary(value: unknown, schema: JsonSchemaDef, rootSchema: JsonSchema): string;
-export declare function detectAnyOfVariant(value: unknown, schemas: JsonSchemaDef[], rootSchema: JsonSchema): number;
-export declare function getItemTitle(item: unknown, discriminatorProp: string | undefined, index: number): string;
-export declare function getSchemaDefault(schema: JsonSchemaDef): unknown;
+export * from '../../utils/json-schema';