@epam/ai-dial-settings-panel 1.3.0-dev.70 → 1.3.0-dev.79

package/components/ExtensionsSection/ExtensionServiceRow.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ExtensionServiceItem, ExtensionsTypography } from '../../models/extensions-props';
+export declare const EXTENSIONS_GRID_COLUMNS = "desktop:grid-cols-[minmax(12rem,1.25fr)_minmax(0,1fr)_minmax(8rem,10rem)]";
+/** Props for `ExtensionServiceRow`. */
+export interface ExtensionServiceRowProps {
+    /** The service rendered by this row. */
+    row: ExtensionServiceItem;
+    /** Typography class overrides. */
+    typography: ExtensionsTypography;
+}
+/** One service row of the Extensions table: an avatar with an optional corner warning badge, the service name, the description, and the host-supplied trailing action. */
+export declare const ExtensionServiceRow: FC<ExtensionServiceRowProps>;
+//# sourceMappingURL=ExtensionServiceRow.d.ts.map

package/components/ExtensionsSection/ExtensionServiceRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionServiceRow.d.ts","sourceRoot":"","sources":["../../../src/components/ExtensionsSection/ExtensionServiceRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AASvC,eAAO,MAAM,uBAAuB,8EACyC,CAAC;AAI9E,uCAAuC;AACvC,MAAM,WAAW,wBAAwB;IACvC,wCAAwC;IACxC,GAAG,EAAE,oBAAoB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,EAAE,oBAAoB,CAAC;CAClC;AAED,0KAA0K;AAC1K,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA6E5D,CAAC"}

package/components/ExtensionsSection/ExtensionsSection.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ExtensionsSectionProps } from '../../models/extensions-props';
+/** Extensions settings table: a Name / Description / sr-only Actions header row plus one row per service. */
+export declare const ExtensionsSection: FC<ExtensionsSectionProps>;
+//# sourceMappingURL=ExtensionsSection.d.ts.map

package/components/ExtensionsSection/ExtensionsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionsSection.d.ts","sourceRoot":"","sources":["../../../src/components/ExtensionsSection/ExtensionsSection.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAO5E,6GAA6G;AAC7G,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAuExD,CAAC"}

package/index.css

@@ -1,2 +1,3 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.flex{display:flex}.min-h-0{min-height:0}.grow{flex-grow:1}.flex-col{flex-direction:column}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}
+._container_1qo5v_1{background:var(--ext-container-bg,var(--bg-layer-raised,#fcfcfc))}._columnHeader_1qo5v_5{color:var(--ext-column-header,var(--text-secondary,#57647a))}._headerRow_1qo5v_9{border-block-end:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._row_1qo5v_16{border-block-start:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._name_1qo5v_20{color:var(--ext-name,var(--text-primary,#161b2d))}._description_1qo5v_24{color:var(--ext-description,var(--text-secondary,#57647a))}._warningBadge_1qo5v_28{color:var(--ext-warning-badge,var(--text-warning-icon,#eec840))}
+/*$vite$:1*//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.end-\[-10px\]{inset-inline-end:-10px}.bottom-\[-3px\]{bottom:-3px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.min-h-0{min-height:0}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.py-3{padding-block:.75rem}.text-start{text-align:start}.text-lg{font-size:1.125rem;line-height:var(--tw-leading,1.75rem)}.break-words{overflow-wrap:break-word}.shadow-md{--tw-shadow:0 8px 24px 0 var(--tw-shadow-color,var(--shadow-md,#2764d90f));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-width:1280px){.desktop\:grid{display:grid}.desktop\:min-h-16{min-height:4rem}.desktop\:grid-cols-\[minmax\(12rem\,1\.25fr\)_minmax\(0\,1fr\)_minmax\(8rem\,10rem\)\]{grid-template-columns:minmax(12rem,1.25fr) minmax(0,1fr) minmax(8rem,10rem)}.desktop\:items-center{align-items:center}.desktop\:gap-4{gap:1rem}.desktop\:px-6{padding-inline:1.5rem}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/index.d.ts

@@ -1,3 +1,5 @@
+export { ExtensionsSection } from './components/ExtensionsSection/ExtensionsSection';
+export type { ExtensionServiceItem, ExtensionsColors, ExtensionsLabels, ExtensionsSectionProps, ExtensionsStyles, ExtensionsTypography, } from './models/extensions-props';
 export { SettingsPanel } from './components/SettingsPanel/SettingsPanel';
 export type { SettingsPanelItem, SettingsPanelProps, SettingsPanelStyles, SettingsPanelTypography, } from './models/settings-panel-props';
 export { SETTINGS_PANEL_CLASS } from './constants/public-class-names';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,29 +1,131 @@
-import { mergeClasses as e } from "@epam/ai-dial-chat-shared";
-import { TabOrientation as t, Tabs as n } from "@epam/ai-dial-ui-kit";
-import { jsx as r } from "react/jsx-runtime";
-//#region src/constants/public-class-names.ts
-var i = {
+import { InitialsAvatar as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
+import { DIAL_ICON_SIZE as r, TabOrientation as i, Tabs as a, Tooltip as o } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangleFilled as s } from "@tabler/icons-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+var u = {
+	container: "_container_1qo5v_1",
+	columnHeader: "_columnHeader_1qo5v_5",
+	headerRow: "_headerRow_1qo5v_9",
+	row: "_row_1qo5v_16",
+	name: "_name_1qo5v_20",
+	description: "_description_1qo5v_24",
+	warningBadge: "_warningBadge_1qo5v_28"
+}, d = "desktop:grid-cols-[minmax(12rem,1.25fr)_minmax(0,1fr)_minmax(8rem,10rem)]", f = 40, p = ({ row: t, typography: i }) => {
+	let { nameClassName: a = "dial-small-semi-text", descriptionClassName: p = "dial-small-text" } = i, { displayName: m, description: h, isWarningVisible: g, authorizeLabel: _, action: v } = t;
+	return /* @__PURE__ */ l("div", {
+		role: "row",
+		className: n("grid grid-cols-1 gap-2 px-4 py-3 desktop:min-h-16 desktop:items-center desktop:gap-4 desktop:px-6", d, u.row),
+		children: [
+			/* @__PURE__ */ l("div", {
+				role: "cell",
+				className: "flex min-w-0 items-center gap-3",
+				children: [/* @__PURE__ */ l("div", {
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ c(e, {
+						name: m,
+						size: f,
+						textClassName: "text-lg"
+					}), g && /* @__PURE__ */ c(o, {
+						tooltip: _,
+						triggerClassName: n("absolute bottom-[-3px] end-[-10px] flex", u.warningBadge),
+						children: /* @__PURE__ */ c("span", {
+							role: "img",
+							"aria-label": _,
+							children: /* @__PURE__ */ c(s, {
+								size: r.MD,
+								"aria-hidden": !0
+							})
+						})
+					})]
+				}), /* @__PURE__ */ c("span", {
+					className: n(a, "min-w-0 flex-1 truncate", u.name),
+					children: m
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				role: "cell",
+				className: "flex min-w-0 items-center",
+				children: /* @__PURE__ */ c("span", {
+					className: n(p, "min-w-0 break-words", u.description),
+					children: h
+				})
+			}),
+			/* @__PURE__ */ c("div", {
+				role: "cell",
+				className: "flex items-center justify-end",
+				children: v
+			})
+		]
+	});
+}, m = ({ rows: e, labels: r, styles: i }) => {
+	let { colors: a } = i ?? {}, o = {
+		columnHeaderClassName: "dial-caption-lead-semi-text",
+		...i?.typography
+	}, s = t({
+		"--ext-container-bg": a?.containerBackground,
+		"--ext-column-header": a?.columnHeaderColor,
+		"--ext-row-divider": a?.rowDividerColor,
+		"--ext-name": a?.nameColor,
+		"--ext-description": a?.descriptionColor,
+		"--ext-warning-badge": a?.warningBadgeColor
+	});
+	return /* @__PURE__ */ l("div", {
+		role: "table",
+		"aria-label": r.tableAriaLabel,
+		className: n("overflow-hidden rounded-xl shadow-md", u.container),
+		style: s,
+		children: [/* @__PURE__ */ l("div", {
+			role: "row",
+			className: n("hidden gap-4 px-6 py-3 desktop:grid desktop:items-center", d, u.headerRow),
+			children: [
+				/* @__PURE__ */ c("span", {
+					role: "columnheader",
+					className: n("text-start", o.columnHeaderClassName, u.columnHeader),
+					children: r.nameColumnLabel
+				}),
+				/* @__PURE__ */ c("span", {
+					role: "columnheader",
+					className: n("text-start", o.columnHeaderClassName, u.columnHeader),
+					children: r.descriptionColumnLabel
+				}),
+				/* @__PURE__ */ c("span", {
+					role: "columnheader",
+					children: /* @__PURE__ */ c("span", {
+						className: "sr-only",
+						children: r.actionsColumnLabel
+					})
+				})
+			]
+		}), /* @__PURE__ */ c("div", {
+			role: "rowgroup",
+			children: e.map((e) => /* @__PURE__ */ c(p, {
+				row: e,
+				typography: o
+			}, e.id))
+		})]
+	});
+}, h = {
 	panel: "dial-settings-panel-panel",
 	tabList: "dial-settings-panel-tab-list",
 	tab: "dial-settings-panel-tab"
-}, a = ({ items: a, activeId: o, onSelect: s, sectionLabel: c, styles: l, className: u }) => {
-	let { sectionLabelClassName: d = "dial-h1-text" } = l?.typography ?? {};
-	return /* @__PURE__ */ r("div", {
-		className: e("flex min-h-0 flex-col bg-layer-raised", u, i.panel),
-		children: /* @__PURE__ */ r(n, {
-			orientation: t.Vertical,
-			sectionLabel: c,
-			tabs: a,
-			activeTabId: o,
+}, g = ({ items: e, activeId: t, onSelect: r, sectionLabel: o, styles: s, className: l }) => {
+	let { sectionLabelClassName: u = "dial-h1-text" } = s?.typography ?? {};
+	return /* @__PURE__ */ c("div", {
+		className: n("flex min-h-0 flex-col bg-layer-raised", l, h.panel),
+		children: /* @__PURE__ */ c(a, {
+			orientation: i.Vertical,
+			sectionLabel: o,
+			tabs: e,
+			activeTabId: t,
 			onTabChange: (e) => {
-				e !== o && s(e);
+				e !== t && r(e);
 			},
 			className: "min-h-0 grow",
-			tabListClassName: i.tabList,
-			tabClassName: i.tab,
-			sectionLabelClassName: d
+			tabListClassName: h.tabList,
+			tabClassName: h.tab,
+			sectionLabelClassName: u
 		})
 	});
 };
 //#endregion
-export { i as SETTINGS_PANEL_CLASS, a as SettingsPanel };
+export { m as ExtensionsSection, h as SETTINGS_PANEL_CLASS, g as SettingsPanel };

package/models/extensions-props.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+/** One extension service rendered as one row of the Extensions table. */
+export interface ExtensionServiceItem {
+    /** Stable identifier for the row. */
+    id: string;
+    /** Service display name shown beside the avatar and used for its initials. */
+    displayName: string;
+    /** Localized service description shown in the Description cell. */
+    description: string;
+    /** Whether the disconnected-state warning badge renders on the avatar's corner. */
+    isWarningVisible: boolean;
+    /** Accessible name and tooltip text of the warning badge. */
+    authorizeLabel: string;
+    /** The row's trailing action (e.g. a Log in / Log out button), owned by the host. */
+    action: ReactNode;
+}
+/** Localized strings shared by the Extensions table shell. */
+export interface ExtensionsLabels {
+    /** Accessible name of the table. */
+    tableAriaLabel: string;
+    /** Column header text for the Name column. */
+    nameColumnLabel: string;
+    /** Column header text for the Description column. */
+    descriptionColumnLabel: string;
+    /** Screen-reader-only column header text for the visually empty Actions column. */
+    actionsColumnLabel: string;
+}
+/** Color overrides for `ExtensionsSection`, applied as CSS custom properties. */
+export interface ExtensionsColors {
+    /** Table container background. Fallback: `--bg-layer-raised`. */
+    containerBackground?: string;
+    /** Column header text color. Fallback: `--text-secondary`. */
+    columnHeaderColor?: string;
+    /** Row divider color. Fallback: `--stroke-tertiary`. */
+    rowDividerColor?: string;
+    /** Service name text color. Fallback: `--text-primary`. */
+    nameColor?: string;
+    /** Service description text color. Fallback: `--text-secondary`. */
+    descriptionColor?: string;
+    /** Warning badge color. Fallback: `--text-warning-icon`. */
+    warningBadgeColor?: string;
+}
+/** Typography class overrides for `ExtensionsSection`. */
+export interface ExtensionsTypography {
+    /** CSS class for the column headers. Defaults to `'dial-caption-lead-semi-text'`. */
+    columnHeaderClassName?: string;
+    /** CSS class for the service name. Defaults to `'dial-small-semi-text'`. */
+    nameClassName?: string;
+    /** CSS class for the service description. Defaults to `'dial-small-text'`. */
+    descriptionClassName?: string;
+}
+/** Style overrides accepted by `ExtensionsSection`. */
+export interface ExtensionsStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: ExtensionsColors;
+    /** Typography class overrides. */
+    typography?: ExtensionsTypography;
+}
+/** Props for `ExtensionsSection`. */
+export interface ExtensionsSectionProps {
+    /** Services to render, in display order. Each renders as one table row. */
+    rows: ExtensionServiceItem[];
+    /** Localized strings shared by the table shell. */
+    labels: ExtensionsLabels;
+    /** Style overrides applied as CSS custom properties and typography class overrides. */
+    styles?: ExtensionsStyles;
+}
+//# sourceMappingURL=extensions-props.d.ts.map

package/models/extensions-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensions-props.d.ts","sourceRoot":"","sources":["../../src/models/extensions-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,yEAAyE;AACzE,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,gBAAgB,EAAE,OAAO,CAAC;IAC1B,6DAA6D;IAC7D,cAAc,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mFAAmF;IACnF,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,iFAAiF;AACjF,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,uDAAuD;AACvD,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACnC;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,mDAAmD;IACnD,MAAM,EAAE,gBAAgB,CAAC;IACzB,uFAAuF;IACvF,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-settings-panel",
-  "description": "Presentational vertical settings navigation panel with icon-labeled rows and active-row highlighting",
-  "version": "1.3.0-dev.70",
+  "description": "Presentational settings surfaces: a vertical settings navigation panel and the Extensions services table",
+  "version": "1.3.0-dev.79",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -16,8 +16,11 @@
       "default": "./index.js"
     }
   },
+  "dependencies": {
+    "@tabler/icons-react": "^3.44.0"
+  },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.70",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.79",
     "@epam/ai-dial-ui-kit": "^0.16.0-dev.11",
     "react": "^19.2.8"
   },