@epam/ai-dial-settings-panel 1.2.0-dev.48 → 1.2.0-dev.50

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":"AACA,OAAO,EAAiB,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAEV,kBAAkB,EACnB,MAAM,mCAAmC,CAAC;AA0B3C,kFAAkF;AAClF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwIhD,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,2 @@
 ._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}}
+/*$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-1{gap:.25rem}.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}}

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 { 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,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,72 +1,77 @@
 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";
+//#region src/constants/public-class-names.ts
 var o = {
+	panel: "dial-settings-panel-panel",
+	tabList: "dial-settings-panel-tab-list",
+	tab: "dial-settings-panel-tab"
+}, s = {
 	sectionLabel: "_sectionLabel_7wog3_1",
 	row: "_row_7wog3_5",
 	rowActive: "_rowActive_7wog3_12"
-}, s = (e, t, n) => {
+}, c = (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) => {
+}, l = (e) => e.findIndex((e) => !e.disabled), u = (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);
+}, d = ({ items: d, activeId: f, onSelect: p, sectionLabel: m, styles: h, className: g }) => {
+	let _ = n(), v = r(/* @__PURE__ */ new Map()), { sectionLabelClassName: y = "dial-h1-text", itemLabelClassName: b = "dial-small-text", activeItemLabelClassName: x = "dial-small-semi-text" } = h?.typography ?? {}, S = h?.colors, C = e({
+		"--sp-section-label-text": S?.sectionLabelText,
+		"--sp-row-text": S?.rowText,
+		"--sp-row-bg-hover": S?.rowBackgroundHover,
+		"--sp-active-row-bg": S?.activeRowBackground,
+		"--sp-active-row-bg-hover": S?.activeRowBackgroundHover,
+		"--sp-active-row-text": S?.activeRowText,
+		"--sp-row-focus-outline": S?.rowFocusOutline
+	}), w = d.findIndex((e) => e.id === f), T = (e) => {
+		if (e < 0 || e === w) return;
+		let t = d[e];
+		v.current.get(t.id)?.focus(), p(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: t("flex flex-col gap-3 bg-layer-raised", g, o.panel),
+		style: C,
+		children: [m && /* @__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
+				id: _,
+				className: t(s.sectionLabel, y),
+				children: m
 			})
 		}), /* @__PURE__ */ i("div", {
 			role: "tablist",
 			"aria-orientation": "vertical",
-			"aria-labelledby": p ? g : void 0,
+			"aria-labelledby": m ? _ : void 0,
 			onKeyDown: (e) => {
 				switch (e.key) {
 					case "ArrowDown":
-						e.preventDefault(), w(s(u, C, 1));
+						e.preventDefault(), T(c(d, w, 1));
 						break;
 					case "ArrowUp":
-						e.preventDefault(), w(s(u, C, -1));
+						e.preventDefault(), T(c(d, w, -1));
 						break;
 					case "Home":
-						e.preventDefault(), w(c(u));
+						e.preventDefault(), T(l(d));
 						break;
 					case "End":
-						e.preventDefault(), w(l(u));
+						e.preventDefault(), T(u(d));
 						break;
 					default: break;
 				}
 			},
 			tabIndex: -1,
-			className: "flex flex-col px-2",
-			children: u.map((e) => {
-				let n = e.id === d, r = n && u.length > 1;
+			className: t("flex flex-col gap-1 px-2", o.tabList),
+			children: d.map((e) => {
+				let n = e.id === f, r = n && d.length > 1;
 				return /* @__PURE__ */ a("button", {
 					ref: (t) => {
-						t ? _.current.set(e.id, t) : _.current.delete(e.id);
+						t ? v.current.set(e.id, t) : v.current.delete(e.id);
 					},
 					type: "button",
 					role: "tab",
@@ -75,11 +80,11 @@ var o = {
 					disabled: e.disabled,
 					tabIndex: n ? 0 : -1,
 					onClick: () => {
-						!e.disabled && !n && f(e.id);
+						!e.disabled && !n && p(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),
+					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", s.row, r && s.rowActive, o.tab),
 					children: [e.icon, /* @__PURE__ */ i("span", {
-						className: t(r ? b : y, !r && "text-primary"),
+						className: t(r ? x : b, !r && "text-primary"),
 						children: e.label
 					})]
 				}, e.id);
@@ -88,4 +93,4 @@ var o = {
 	});
 };
 //#endregion
-export { u as SettingsPanel };
+export { o as SETTINGS_PANEL_CLASS, d as SettingsPanel };

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