@epam/ai-dial-sidebar 1.0.0-dev.503 → 1.0.0-dev.509

package/components/SearchInput/SearchInput.d.ts

@@ -1,29 +1,39 @@
 import { FC } from 'react';
-/** CSS custom-property overrides for the `SearchInput` component. */
-export interface SearchInputColors {
-    /** Search icon color. */
-    icon?: string;
-}
-/** Props for `SearchInput`. */
-export interface SearchInputProps {
+/** All user-visible strings in {@link SearchInputProps}. */
+export interface SearchInputLabels {
     /** Placeholder text (e.g. `"Search chat…"`). */
     placeholder: string;
-    /** Current search query value. */
-    value: string;
-    /** Called whenever the query changes. */
-    onChange: (value: string) => void;
     /** Accessible label for the clear-search button. */
     clearLabel: string;
     /** Accessible label for the search input. Defaults to `placeholder` when omitted. */
     ariaLabel?: string;
+}
+/** CSS custom-property overrides for the `SearchInput` component. */
+export interface SearchInputColors {
+    /** Search icon color. */
+    icon?: string;
+}
+/** Combined style overrides (colors and class names) for the `SearchInput` component. */
+export interface SearchInputStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: SearchInputColors;
     /** CSS class applied to the search icon. Defaults to the module's `.icon` class (`--text-secondary`). */
     iconClassName?: string;
     /** CSS class applied to the outer wrapper, merged over the default `'px-2 py-1'`. Override to change the pill's horizontal inset. */
     wrapperClassName?: string;
     /** CSS class applied to the search row, merged after its own border/radius defaults. Use an important-modifier class (e.g. `'!rounded-lg'`) to override the default pill shape. */
     rowClassName?: string;
-    /** Color overrides applied as CSS custom properties. */
-    colors?: SearchInputColors;
+}
+/** Props for `SearchInput`. */
+export interface SearchInputProps {
+    /** Current search query value. */
+    value: string;
+    /** Called whenever the query changes. */
+    onChange: (value: string) => void;
+    /** User-visible strings. */
+    labels: SearchInputLabels;
+    /** Style overrides for colors and element class names. */
+    styles?: SearchInputStyles;
 }
 /**
  * Minimal search input with icon positioned to align with sibling action buttons.

package/components/SearchInput/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAG/C,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,+BAA+B;AAC/B,MAAM,WAAW,gBAAgB;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yGAAyG;IACzG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qIAAqI;IACrI,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mLAAmL;IACnL,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2C5C,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAG/C,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,yFAAyF;AACzF,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,yGAAyG;IACzG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qIAAqI;IACrI,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mLAAmL;IACnL,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,+BAA+B;AAC/B,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4BAA4B;IAC5B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA4C5C,CAAC"}

package/index.d.ts

@@ -3,7 +3,7 @@ export { SearchInput } from './components/SearchInput/SearchInput';
 export { PanelEmpty } from './components/PanelEmptyState/PanelEmpty';
 export { PanelNoResults } from './components/PanelEmptyState/PanelNoResults';
 export { SidebarOrientation } from './types/orientation';
-export type { SearchInputProps } from './components/SearchInput/SearchInput';
+export type { SearchInputColors, SearchInputLabels, SearchInputProps, SearchInputStyles, } from './components/SearchInput/SearchInput';
 export type { PanelEmptyProps } from './components/PanelEmptyState/PanelEmpty';
 export type { PanelNoResultsProps } from './components/PanelEmptyState/PanelNoResults';
 export type { SidebarPanelProps, SidebarPanelStyles, SidebarPanelColors, SidebarPanelTypography, } from './models/panel-props';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,sCAAsC,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC"}

package/index.js

@@ -76227,36 +76227,36 @@ var a3 = {
 	container: "_container_bc4pw_1",
 	icon: "_icon_bc4pw_16",
 	input: "_input_bc4pw_20"
-}, o3 = ({ value: e, onChange: t, placeholder: n = "Search", ariaLabel: r, containerClassName: i, iconClassName: a, inputClassName: o, iconSize: s = ko.MD, iconStrokeWidth: c, clearLabel: l = "Clear search", clearButtonClassName: u }) => {
-	let d = r ?? n;
+}, o3 = ({ value: e, onChange: t, labels: n, iconSize: r = ko.MD, iconStrokeWidth: i, styles: a }) => {
+	let { placeholder: o = "Search", ariaLabel: s, clearLabel: c = "Clear search" } = n ?? {}, { containerClassName: l, iconClassName: u, inputClassName: d, clearButtonClassName: f } = a ?? {}, p = s ?? o;
 	return /* @__PURE__ */ j("div", {
 		role: "search",
 		children: /* @__PURE__ */ M("div", {
-			className: EB(a3.container, "flex cursor-text items-center gap-3 rounded-xl border px-4 py-2 transition-[border-color,box-shadow] duration-150 ease-in-out", i),
+			className: EB(a3.container, "flex cursor-text items-center gap-3 rounded-xl border px-4 py-2 transition-[border-color,box-shadow] duration-150 ease-in-out", l),
 			children: [
 				/* @__PURE__ */ j(be, {
-					size: s,
-					stroke: c,
-					className: EB(a3.icon, "shrink-0 transition-colors duration-150 ease-in-out", a),
+					size: r,
+					stroke: i,
+					className: EB(a3.icon, "shrink-0 transition-colors duration-150 ease-in-out", u),
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ j("input", {
 					type: "text",
-					className: EB(a3.input, "min-w-0 flex-1 border-0 p-0 text-sm font-normal leading-5 outline-none", o),
+					className: EB(a3.input, "min-w-0 flex-1 border-0 p-0 text-sm font-normal leading-5 outline-none", d),
 					value: e,
-					placeholder: n,
-					"aria-label": d,
+					placeholder: o,
+					"aria-label": p,
 					onChange: (e) => t(e.target.value)
 				}),
 				e && /* @__PURE__ */ j("button", {
 					type: "button",
 					onClick: () => t(""),
-					"aria-label": l,
-					className: EB("flex shrink-0 items-center justify-center", u),
+					"aria-label": c,
+					className: EB("flex shrink-0 items-center justify-center", f),
 					children: /* @__PURE__ */ j(xe, {
-						size: s,
-						stroke: c,
-						className: EB(a3.icon, a),
+						size: r,
+						stroke: i,
+						className: EB(a3.icon, u),
 						"aria-hidden": !0
 					})
 				})
@@ -76267,34 +76267,41 @@ var a3 = {
 	tabContainer: "_tabContainer_rzv03_1",
 	tabActive: "_tabActive_rzv03_13"
 };
-b(({ tabs: e, activeTabId: t, onTabChange: n, tabClassName: r = "dial-tiny-semi-text" }) => /* @__PURE__ */ j("div", {
-	className: "flex flex-nowrap gap-1",
-	children: e.map((e) => {
-		let i = t === e.id;
-		return /* @__PURE__ */ j(jo, {
-			label: e.label,
-			selected: i,
-			onClick: () => n(e.id),
-			className: EB("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", r, s3.tabContainer, i && s3.tabActive)
-		}, e.id);
-	})
-}));
-var c3 = { icon: "_icon_1b1ye_1" }, l3 = b(({ placeholder: e, value: i, onChange: a, clearLabel: o, ariaLabel: s, iconClassName: c = c3.icon, wrapperClassName: l, rowClassName: u, colors: d }) => {
-	let f = D(() => t({ "--si-icon": d?.icon }), [d]);
+b(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
+	let { tabClassName: i = "dial-tiny-semi-text" } = r?.typography ?? {};
+	return /* @__PURE__ */ j("div", {
+		className: "flex flex-nowrap gap-1",
+		children: e.map((e) => {
+			let r = t === e.id;
+			return /* @__PURE__ */ j(jo, {
+				label: e.label,
+				selected: r,
+				onClick: () => n(e.id),
+				className: EB("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, s3.tabContainer, r && s3.tabActive)
+			}, e.id);
+		})
+	});
+});
+var c3 = { icon: "_icon_1b1ye_1" }, l3 = b(({ value: e, onChange: i, labels: a, styles: o }) => {
+	let { colors: s, iconClassName: c = c3.icon, wrapperClassName: l, rowClassName: u } = o ?? {}, d = D(() => t({ "--si-icon": s?.icon }), [s]);
 	return /* @__PURE__ */ j("div", {
 		className: n("px-3 py-2", l),
-		style: f,
+		style: d,
 		children: /* @__PURE__ */ j(o3, {
-			value: i,
-			onChange: a,
-			placeholder: e,
-			clearLabel: o,
-			ariaLabel: s,
-			iconClassName: c,
+			value: e,
+			onChange: i,
+			labels: {
+				placeholder: a.placeholder,
+				clearLabel: a.clearLabel,
+				ariaLabel: a.ariaLabel
+			},
 			iconSize: r.SM,
 			iconStrokeWidth: 1.5,
-			containerClassName: n("min-h-11 w-full gap-2 rounded-full border pe-3 ps-3 desktop:min-h-9", u),
-			clearButtonClassName: "size-11 desktop:size-6"
+			styles: {
+				iconClassName: c,
+				containerClassName: n("min-h-11 w-full gap-2 rounded-full border pe-3 ps-3 desktop:min-h-9", u),
+				clearButtonClassName: "size-11 desktop:size-6"
+			}
 		})
 	});
 }), u3 = b(({ label: t, icon: n = c, iconSize: r = 48 }) => /* @__PURE__ */ j(e, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-sidebar",
   "description": "Resizable sidebar panel shell with header, search, and empty state components",
-  "version": "1.0.0-dev.503",
+  "version": "1.0.0-dev.509",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -17,8 +17,8 @@
     }
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.0.0-dev.503",
-    "@epam/ai-dial-kit": "1.0.0-dev.503",
+    "@epam/ai-dial-chat-shared": "1.0.0-dev.509",
+    "@epam/ai-dial-kit": "1.0.0-dev.509",
     "@epam/ai-dial-ui-kit": "0.12.0-dev.28",
     "@tabler/icons-react": "^3.44.0",
     "react": "^19.0.0"