@epam/ai-dial-ui-kit 0.16.0-dev.39 → 0.16.0-dev.41

package/dist/grid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-B2yk99n7.cjs");exports.DEFAULT_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_DATE_LOCALE=e.DEFAULT_LOCALE;exports.DEFAULT_GRID_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS$1;exports.DEFAULT_GRID_DATE_LOCALE=e.DEFAULT_LOCALE$1;exports.DateCellRenderer=e.DateCellRenderer;exports.DialDateCellRenderer=e.DialDateCellRenderer;exports.DialGrid=e.DialGrid;exports.GRID_ALIGN_RIGHT_CLASS=e.GRID_ALIGN_RIGHT_CLASS;exports.GRID_ROOT_CLASS=e.GRID_ROOT_CLASS;exports.GRID_ROW_HEIGHT=e.ROW_HEIGHT;exports.GRID_SELECTION_COLUMN_ID=e.GRID_SELECTION_COLUMN_ID;exports.GRID_THEME_PARAMS=e.GRID_THEME_PARAMS;exports.Grid=e.Grid;exports.GridColorScheme=e.GridColorScheme;exports.GridSelectionMode=e.GridSelectionMode;exports.baseColumnComparator=e.baseColumnComparator;exports.checkColDefsChanges=e.checkColDefsChanges;exports.convertGridDateToDate=e.convertToDate;exports.convertToDate=e.convertToDate;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-f1EmpTB0.cjs");exports.DEFAULT_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_DATE_LOCALE=e.DEFAULT_LOCALE;exports.DEFAULT_GRID_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS$1;exports.DEFAULT_GRID_DATE_LOCALE=e.DEFAULT_LOCALE$1;exports.DateCellRenderer=e.DateCellRenderer;exports.DialDateCellRenderer=e.DialDateCellRenderer;exports.DialGrid=e.DialGrid;exports.GRID_ALIGN_RIGHT_CLASS=e.GRID_ALIGN_RIGHT_CLASS;exports.GRID_ROOT_CLASS=e.GRID_ROOT_CLASS;exports.GRID_ROW_HEIGHT=e.ROW_HEIGHT;exports.GRID_SELECTION_COLUMN_ID=e.GRID_SELECTION_COLUMN_ID;exports.GRID_THEME_PARAMS=e.GRID_THEME_PARAMS;exports.Grid=e.Grid;exports.GridColorScheme=e.GridColorScheme;exports.GridSelectionMode=e.GridSelectionMode;exports.baseColumnComparator=e.baseColumnComparator;exports.checkColDefsChanges=e.checkColDefsChanges;exports.convertGridDateToDate=e.convertToDate;exports.convertToDate=e.convertToDate;

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

@@ -0,0 +1,63 @@
+import { FC, ReactNode } from 'react';
+import { FormSectionVariant } from '../../../types/form-section';
+export type FormSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface FormSectionProps {
+    /** Heading of the section; also names the `section` landmark. */
+    title: ReactNode;
+    /** Control at the end of the heading row — typically a small "Add" or "Change" button. */
+    action?: ReactNode;
+    /** Optional line under the heading saying what the section holds. */
+    description?: ReactNode;
+    /** Type scale of the heading and description. Defaults to `FormSectionVariant.Row`. */
+    variant?: FormSectionVariant;
+    /** Level of the heading element, to fit the page's outline. Defaults to `3`. */
+    headingLevel?: FormSectionHeadingLevel;
+    /** The section's fields or values. */
+    children?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the heading. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+    /** Additional CSS classes for the content wrapper. */
+    contentClassName?: string;
+}
+/**
+ * A titled section of a form or a builder column: a heading with an optional
+ * action at its end, an optional description and the section's content.
+ * aliases: SectionRow|FieldSection|SettingsSection|FormGroup|SectionHeader
+ * Design system 2.0
+ *
+ * The root is a `section` named by its heading, so each section is a region a
+ * screen reader can jump to. `headingLevel` picks the heading element so the
+ * section fits the outline of the page it is mounted in; the variant only sets
+ * the type scale. The action sits at the inline end of the heading row and
+ * never shrinks; the content is rendered as given, with no field styling of its
+ * own. For a collapsible group, use `Accordion`; for a single labelled control,
+ * the control's own `label`.
+ *
+ * @example
+ * ```tsx
+ * <FormSection
+ *   title="Model"
+ *   variant={FormSectionVariant.Caption}
+ *   action={<GhostButton label="Change" onClick={openPicker} />}
+ *   description="The model that answers in this application."
+ * >
+ *   <SelectedEntityCard entityId={modelId} />
+ * </FormSection>
+ * ```
+ *
+ * @param title - Heading of the section; also names the `section` landmark.
+ * @param [action] - Control at the end of the heading row.
+ * @param [description] - Optional line under the heading.
+ * @param [variant] - Type scale of the heading and description. Defaults to `FormSectionVariant.Row`.
+ * @param [headingLevel] - Level of the heading element. Defaults to `3`.
+ * @param [children] - The section's fields or values.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the heading.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ * @param [contentClassName] - Additional CSS classes for the content wrapper.
+ */
+export declare const FormSection: FC<FormSectionProps>;

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

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { TabOrientation } from '../../../types/tab';
+import { TabOrientation, TabStatus } from '../../../types/tab';
 /** A single tab entry rendered by {@link Tabs}. */
 export interface TabItem {
     /** Unique identifier used to match against `activeTabId`. */
@@ -12,6 +12,18 @@ export interface TabItem {
     icon?: ReactNode;
     /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
     disabled?: boolean;
+    /**
+     * Flags the tab as holding an error or a warning � typically a form section
+     * that failed validation. Draws a coloured icon after the label and adds the
+     * state to the tab's accessible name. Uses the {@link TabStatus} enum.
+     */
+    status?: TabStatus;
+    /**
+     * Already-translated text announced for `status`, appended to the tab's
+     * accessible name. Defaults to `'Error'` / `'Warning'`; pass it when the
+     * interface is localised.
+     */
+    statusLabel?: string;
 }
 export interface TabsProps {
     /** Ordered list of tabs to render. */
@@ -64,6 +76,10 @@ export interface TabsProps {
  * `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.
  *
+ * A tab with a `status` (`TabStatus.Error` or `TabStatus.Warning`) draws a
+ * coloured icon after its label, and the status text joins the tab's accessible
+ * name so the state reaches assistive tech as well as sighted users.
+ *
  * `className` lands on whichever element is outermost: the heading wrapper when
  * `sectionLabel` is set, the `role="tablist"` itself when it is not.
  *

package/dist/src/constants/public-class-names.d.ts

@@ -154,6 +154,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly entityIdentity: "dial-kit-entity-identity";
     /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */
     readonly selectedEntityCard: "dial-kit-selected-entity-card";
+    /** The `section` root of a `FormSection`: its heading row, description and content. */
+    readonly formSection: "dial-kit-form-section";
     /** The row of a `Switch`: the control and its label. */
     readonly switch: "dial-kit-switch";
     /** The row of a `Checkbox`: the box and its label. */

package/dist/src/index.d.ts

@@ -104,7 +104,7 @@ export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
 export { MenuItemMark } from './types/menu-item';
 export { ElementSize } from './types/size';
-export { ScreenResolution, TabOrientation, TabView } from './types/tab';
+export { ScreenResolution, TabOrientation, TabStatus, TabView, } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { SelectSize, SelectVariant } from './types/select';
@@ -284,6 +284,9 @@ export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
 export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
 export { StateScreen } from './components/New/StateScreen/StateScreen';
 export type { StateScreenProps } from './components/New/StateScreen/StateScreen';
+export { FormSection } from './components/New/FormSection/FormSection';
+export type { FormSectionProps, FormSectionHeadingLevel, } from './components/New/FormSection/FormSection';
+export { FormSectionVariant } from './types/form-section';
 export { TransferQueue } from './components/New/TransferQueue/TransferQueue';
 export type { TransferQueueItem, TransferQueueLabels, TransferQueueProps, } from './components/New/TransferQueue/TransferQueue';
 export { DEFAULT_TRANSFER_QUEUE_LABELS, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS, } from './components/New/TransferQueue/constants';

package/dist/src/types/form-section.d.ts

@@ -0,0 +1,9 @@
+/** How a `FormSection` sets its heading, description and content. */
+export declare enum FormSectionVariant {
+    /** A field of a form: small semibold heading, small description, an 8px header gap. */
+    Row = "row",
+    /** A titled group of a builder column: caption-lead heading, tiny description. */
+    Caption = "caption",
+    /** One setting inside a group: tiny semibold heading, tiny description. */
+    Setting = "setting"
+}

package/dist/src/types/tab.d.ts

@@ -2,6 +2,11 @@ export declare enum TabOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+/** Validation state a tab can flag on itself, e.g. a form section with problems. */
+export declare enum TabStatus {
+    Error = "error",
+    Warning = "warning"
+}
 export declare enum TabView {
     Default = "default",
     Inline = "inline"

package/dist/types/form-section.js

@@ -0,0 +1,4 @@
+var p = /* @__PURE__ */ ((t) => (t.Row = "row", t.Caption = "caption", t.Setting = "setting", t))(p || {});
+export {
+  p as FormSectionVariant
+};

package/dist/types/tab.js

@@ -1,6 +1,7 @@
-var l = /* @__PURE__ */ ((r) => (r.Horizontal = "horizontal", r.Vertical = "vertical", r))(l || {}), t = /* @__PURE__ */ ((r) => (r.Default = "default", r.Inline = "inline", r))(t || {}), e = /* @__PURE__ */ ((r) => (r.Mobile = "mobile", r.Tablet = "tablet", r))(e || {});
+var e = /* @__PURE__ */ ((r) => (r.Horizontal = "horizontal", r.Vertical = "vertical", r))(e || {}), l = /* @__PURE__ */ ((r) => (r.Error = "error", r.Warning = "warning", r))(l || {}), n = /* @__PURE__ */ ((r) => (r.Default = "default", r.Inline = "inline", r))(n || {}), a = /* @__PURE__ */ ((r) => (r.Mobile = "mobile", r.Tablet = "tablet", r))(a || {});
 export {
-  e as ScreenResolution,
-  l as TabOrientation,
-  t as TabView
+  a as ScreenResolution,
+  e as TabOrientation,
+  l as TabStatus,
+  n as TabView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.16.0-dev.39",
+  "version": "0.16.0-dev.41",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",