@epam/ai-dial-settings-panel 1.2.0-dev.28 → 1.2.0-dev.284

package/components/SettingsPanel/SettingsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SettingsPanel/SettingsPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAEV,kBAAkB,EACnB,MAAM,mCAAmC,CAAC;AA0B3C,kFAAkF;AAClF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgIhD,CAAC"}
+{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SettingsPanel/SettingsPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,kFAAkF;AAClF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwChD,CAAC"}

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

@@ -0,0 +1,9 @@
+export declare const SETTINGS_PANEL_CLASS: {
+    /** The panel root, which carries the themed CSS variables. */
+    readonly panel: "dial-settings-panel-panel";
+    /** The vertical tab list holding the section rows. */
+    readonly tabList: "dial-settings-panel-tab-list";
+    /** Every section row, selected or not. */
+    readonly tab: "dial-settings-panel-tab";
+};
+//# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,oBAAoB;IAC/B,8DAA8D;;IAE9D,sDAAsD;;IAEtD,0CAA0C;;CAElC,CAAC"}

package/index.css

@@ -1,2 +1 @@
-._sectionLabel_7wog3_1{color:var(--sp-section-label-text,var(--text-primary,#161b2d))}._row_7wog3_5{color:var(--sp-row-text,var(--text-secondary,#57647a))}._row_7wog3_5:focus-visible{outline-color:var(--sp-row-focus-outline,var(--stroke-focus-black,#161b2d))}@media (hover:hover){._row_7wog3_5:hover:not(:disabled):not(._rowActive_7wog3_12){background-color:var(--sp-row-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}}._row_7wog3_5:disabled{cursor:not-allowed}._row_7wog3_5._rowActive_7wog3_12{color:var(--sp-active-row-text,var(--text-accent,#1d4ed8));background-color:var(--sp-active-row-bg,var(--bg-control-accent-alpha,#2764d90f))}@media (hover:hover){._row_7wog3_5._rowActive_7wog3_12:hover{background-color:var(--sp-active-row-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}}
-/*$vite$:1*/.flex{display:flex}.h-11{height:2.75rem}.h-16{height:4rem}.w-full{width:100%}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-lg{border-radius:.5rem}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.text-start{text-align:start}.text-primary{color:var(--text-primary,#161b2d)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:outline:focus-visible{outline-style:solid;outline-width:1px}.focus-visible\:-outline-offset-1:focus-visible{outline-offset:-1px}@media (min-width:1280px){.desktop\:h-10{height:2.5rem}}
+.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)}

package/index.d.ts

@@ -1,3 +1,4 @@
 export { SettingsPanel } from './components/SettingsPanel/SettingsPanel';
-export type { SettingsPanelItem, SettingsPanelProps, SettingsPanelStyles, SettingsPanelColors, SettingsPanelTypography, } from './models/settings-panel-props';
+export type { SettingsPanelItem, SettingsPanelProps, SettingsPanelStyles, SettingsPanelTypography, } from './models/settings-panel-props';
+export { SETTINGS_PANEL_CLASS } from './constants/public-class-names';
 //# sourceMappingURL=index.d.ts.map

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,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC"}
+{"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"}

package/index.js

@@ -1,91 +1,29 @@
-import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
-import { useId as n, useRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-var o = {
-	sectionLabel: "_sectionLabel_7wog3_1",
-	row: "_row_7wog3_5",
-	rowActive: "_rowActive_7wog3_12"
-}, s = (e, t, n) => {
-	let r = e.length;
-	for (let i = 1; i <= r; i += 1) {
-		let a = (t + n * i + r) % r;
-		if (!e[a].disabled) return a;
-	}
-	return t;
-}, c = (e) => e.findIndex((e) => !e.disabled), l = (e) => {
-	for (let t = e.length - 1; t >= 0; --t) if (!e[t].disabled) return t;
-	return -1;
-}, u = ({ items: u, activeId: d, onSelect: f, sectionLabel: p, styles: m, className: h }) => {
-	let g = n(), _ = r(/* @__PURE__ */ new Map()), { sectionLabelClassName: v = "dial-h1-text", itemLabelClassName: y = "dial-small-text", activeItemLabelClassName: b = "dial-small-semi-text" } = m?.typography ?? {}, x = m?.colors, S = e({
-		"--sp-section-label-text": x?.sectionLabelText,
-		"--sp-row-text": x?.rowText,
-		"--sp-row-bg-hover": x?.rowBackgroundHover,
-		"--sp-active-row-bg": x?.activeRowBackground,
-		"--sp-active-row-bg-hover": x?.activeRowBackgroundHover,
-		"--sp-active-row-text": x?.activeRowText,
-		"--sp-row-focus-outline": x?.rowFocusOutline
-	}), C = u.findIndex((e) => e.id === d), w = (e) => {
-		if (e < 0 || e === C) return;
-		let t = u[e];
-		_.current.get(t.id)?.focus(), f(t.id);
-	};
-	return /* @__PURE__ */ a("div", {
-		className: t("flex flex-col gap-3 bg-layer-raised", h),
-		style: S,
-		children: [p && /* @__PURE__ */ i("div", {
-			className: "flex h-16 shrink-0 items-center px-4",
-			children: /* @__PURE__ */ i("span", {
-				id: g,
-				className: t(o.sectionLabel, v),
-				children: p
-			})
-		}), /* @__PURE__ */ i("div", {
-			role: "tablist",
-			"aria-orientation": "vertical",
-			"aria-labelledby": p ? g : void 0,
-			onKeyDown: (e) => {
-				switch (e.key) {
-					case "ArrowDown":
-						e.preventDefault(), w(s(u, C, 1));
-						break;
-					case "ArrowUp":
-						e.preventDefault(), w(s(u, C, -1));
-						break;
-					case "Home":
-						e.preventDefault(), w(c(u));
-						break;
-					case "End":
-						e.preventDefault(), w(l(u));
-						break;
-					default: break;
-				}
+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 = {
+	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,
+			onTabChange: (e) => {
+				e !== o && s(e);
 			},
-			tabIndex: -1,
-			className: "flex flex-col px-2",
-			children: u.map((e) => {
-				let n = e.id === d, r = n && u.length > 1;
-				return /* @__PURE__ */ a("button", {
-					ref: (t) => {
-						t ? _.current.set(e.id, t) : _.current.delete(e.id);
-					},
-					type: "button",
-					role: "tab",
-					"aria-selected": n,
-					"aria-disabled": e.disabled || void 0,
-					disabled: e.disabled,
-					tabIndex: n ? 0 : -1,
-					onClick: () => {
-						!e.disabled && !n && f(e.id);
-					},
-					className: t("flex h-11 w-full items-center gap-2 rounded-lg px-3 text-start desktop:h-10", "focus-visible:outline focus-visible:-outline-offset-1", o.row, r && o.rowActive),
-					children: [e.icon, /* @__PURE__ */ i("span", {
-						className: t(r ? b : y, !r && "text-primary"),
-						children: e.label
-					})]
-				}, e.id);
-			})
-		})]
+			className: "min-h-0 grow",
+			tabListClassName: i.tabList,
+			tabClassName: i.tab,
+			sectionLabelClassName: d
+		})
 	});
 };
 //#endregion
-export { u as SettingsPanel };
+export { i as SETTINGS_PANEL_CLASS, a as SettingsPanel };

package/models/settings-panel-props.d.ts

@@ -14,34 +14,11 @@ export interface SettingsPanelItem {
 export interface SettingsPanelTypography {
     /** Typography class applied to the section header. Defaults to `'dial-h1-text'`. */
     sectionLabelClassName?: string;
-    /** Typography class applied to an inactive row's label. Defaults to `'dial-small-text'`. */
-    itemLabelClassName?: string;
-    /** Typography class applied to the active row's label. Defaults to `'dial-small-semi-text'`. */
-    activeItemLabelClassName?: string;
-}
-/** Color overrides for the {@link SettingsPanel} component, applied as CSS custom properties. */
-export interface SettingsPanelColors {
-    /** Label color of the section header. Defaults to `--text-primary`. */
-    sectionLabelText?: string;
-    /** Label and icon color of an inactive row (enabled or disabled). Defaults to `--text-secondary`. */
-    rowText?: string;
-    /** Background color of an enabled, inactive row on hover. Defaults to `--bg-control-accent-alpha-hover`. */
-    rowBackgroundHover?: string;
-    /** Background color of the active row. Defaults to `--bg-control-accent-alpha`. */
-    activeRowBackground?: string;
-    /** Background color of the active row on hover. Defaults to `--bg-control-accent-alpha-hover`. */
-    activeRowBackgroundHover?: string;
-    /** Label and icon color of the active row. Defaults to `--text-accent`. */
-    activeRowText?: string;
-    /** Keyboard focus ring color. Defaults to `--stroke-focus-black`. */
-    rowFocusOutline?: string;
 }
 /** Style overrides for the {@link SettingsPanel} component. */
 export interface SettingsPanelStyles {
     /** Typography overrides. */
     typography?: SettingsPanelTypography;
-    /** Color overrides applied as CSS custom properties. */
-    colors?: SettingsPanelColors;
 }
 /** Props for {@link SettingsPanel}. */
 export interface SettingsPanelProps {

package/models/settings-panel-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/settings-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gGAAgG;IAChG,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,iGAAiG;AACjG,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4GAA4G;IAC5G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mFAAmF;IACnF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kGAAkG;IAClG,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,wDAAwD;IACxD,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iGAAiG;IACjG,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"settings-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/settings-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,uBAAuB,CAAC;CACtC;AAED,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iGAAiG;IACjG,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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.2.0-dev.28",
+  "version": "1.2.0-dev.284",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -17,8 +17,8 @@
     }
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.28",
-    "@epam/ai-dial-ui-kit": "^0.14.2",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.284",
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.36",
     "react": "^19.2.8"
   },
   "repository": {