@epam/ai-dial-settings-panel 1.1.0-dev.242

package/components/SettingsPanel/SettingsPanel.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { SettingsPanelProps } from '../../models/settings-panel-props';
+/** Vertical icon + label navigation panel with a roving-tabindex ARIA tablist. */
+export declare const SettingsPanel: FC<SettingsPanelProps>;
+//# sourceMappingURL=SettingsPanel.d.ts.map

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

@@ -0,0 +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"}

package/index.css

@@ -0,0 +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*/

package/index.d.ts

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

package/index.d.ts.map

@@ -0,0 +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"}

package/index.js

@@ -0,0 +1,91 @@
+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;
+				}
+			},
+			tabIndex: -1,
+			className: "flex flex-col",
+			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);
+			})
+		})]
+	});
+};
+//#endregion
+export { u as SettingsPanel };

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

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+/** One row rendered by {@link SettingsPanel}. */
+export interface SettingsPanelItem {
+    /** Stable identifier, matched against `SettingsPanelProps.activeId`. */
+    id: string;
+    /** Already-localized row label. */
+    label: string;
+    /** Row icon, rendered before the label. */
+    icon?: ReactNode;
+    /** Disabled rows cannot become active, render with a `not-allowed` cursor, and are skipped by keyboard navigation. Defaults to `false`. */
+    disabled?: boolean;
+}
+/** Typography overrides for the {@link SettingsPanel} component. */
+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 {
+    /** Rows to render, top to bottom. */
+    items: SettingsPanelItem[];
+    /** `id` of the currently selected item. */
+    activeId: string;
+    /** Fired with an item's `id` when the user selects an enabled row that is not already active. */
+    onSelect: (id: string) => void;
+    /** Already-localized header text rendered above the item list. Omit to render no header. */
+    sectionLabel?: string;
+    /** Style overrides. */
+    styles?: SettingsPanelStyles;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+}
+//# sourceMappingURL=settings-panel-props.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@epam/ai-dial-settings-panel",
+  "description": "Presentational vertical settings navigation panel with icon-labeled rows and active-row highlighting",
+  "version": "1.1.0-dev.242",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.242",
+    "@epam/ai-dial-ui-kit": "^0.13.0-dev.64",
+    "@tabler/icons-react": "^3.44.0",
+    "react": "^19.2.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epam/ai-dial-chat.git",
+    "directory": "libs/settings-panel"
+  }
+}