@epam/ai-dial-starter-buttons 1.2.0-dev.6 → 1.2.0-dev.61

package/components/StarterButtons/StarterButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StarterButtons.d.ts","sourceRoot":"","sources":["../../../src/components/StarterButtons/StarterButtons.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAMtE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmKlD,CAAC"}
+{"version":3,"file":"StarterButtons.d.ts","sourceRoot":"","sources":["../../../src/components/StarterButtons/StarterButtons.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAMtE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuKlD,CAAC"}

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

@@ -0,0 +1,7 @@
+export declare const STARTER_BUTTONS_CLASS: {
+    /** The component's outer wrapper. */
+    readonly root: "dial-starter-buttons-root";
+    /** The `role="list"` box holding the buttons, in both layouts. */
+    readonly list: "dial-starter-buttons-list";
+};
+//# 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":"AAYA,eAAO,MAAM,qBAAqB;IAChC,qCAAqC;;IAErC,kEAAkE;;CAE1D,CAAC"}

package/index.css

@@ -0,0 +1 @@
+.visible{visibility:visible}.collapse{visibility:collapse}.mb-4{margin-bottom:1rem}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}

package/index.d.ts

@@ -1,3 +1,4 @@
 export { StarterButtons } from './components/StarterButtons/StarterButtons';
 export type { StarterButtonsProps, StarterButtonsLabels, StarterButtonsStyles, } from './models/starter-props';
+export { STARTER_BUTTONS_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,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAC5E,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,86 +1,89 @@
 import { BASE_MD_ICON_PROPS as e } from "@epam/ai-dial-chat-shared";
-import { ButtonAppearance as t, DIAL_KIT_ICON_STROKE as n, Dropdown as r, NeutralButton as i, NeutralIconButton as a } from "@epam/ai-dial-ui-kit";
-import { IconDots as o, IconDotsVertical as s } from "@tabler/icons-react";
-import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/StarterButtons/StarterButtons.tsx
-var h = 4, g = 8, _ = ({ starters: _, onSelect: v, isMobile: y, isCollapsible: b = !0, labels: x, styles: S }) => {
-	let C = d(null), w = d([]), T = d([]), [E, D] = f(() => Math.min(_.length, h)), O = c((e) => {
-		let t = C.current;
-		if (!t || !b) return;
+import { ButtonAppearance as t, DIAL_KIT_ICON_STROKE as n, Dropdown as r, NeutralButton as i, NeutralIconButton as a, mergeClasses as o } from "@epam/ai-dial-ui-kit";
+import { IconDots as s, IconDotsVertical as c } from "@tabler/icons-react";
+import { useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/constants/public-class-names.ts
+var g = {
+	root: "dial-starter-buttons-root",
+	list: "dial-starter-buttons-list"
+}, _ = 4, v = 8, y = ({ starters: y, onSelect: b, isMobile: x, isCollapsible: S = !0, labels: C, styles: w }) => {
+	let T = f(null), E = f([]), D = f([]), [O, k] = p(() => Math.min(y.length, _)), A = l((e) => {
+		let t = T.current;
+		if (!t || !S) return;
 		let n = t.getBoundingClientRect().width;
 		if (n === 0) return;
-		let r = Math.min(e, h);
-		w.current.slice(0, r).every((e) => e != null) && (T.current = w.current.slice(0, r).map((e) => e?.getBoundingClientRect().width ?? 0));
-		let i = (e) => T.current[e] ?? 120, a = 0, o = 0;
+		let r = Math.min(e, _);
+		E.current.slice(0, r).every((e) => e != null) && (D.current = E.current.slice(0, r).map((e) => e?.getBoundingClientRect().width ?? 0));
+		let i = (e) => D.current[e] ?? 120, a = 0, o = 0;
 		for (let t = 0; t < r; t++) {
 			let r = i(t), s = e - (t + 1) > 0;
-			if (a + (t > 0 ? g : 0) + r + (s ? 64 : 0) > n) break;
-			a += (t > 0 ? g : 0) + r, o = t + 1;
+			if (a + (t > 0 ? v : 0) + r + (s ? 64 : 0) > n) break;
+			a += (t > 0 ? v : 0) + r, o = t + 1;
 		}
-		D(Math.max(1, o));
-	}, [b]);
-	l(() => {
-		T.current = [], D(Math.min(_.length, h));
-	}, [_.length]), l(() => {
-		let e = C.current;
-		if (!e || !b) return;
+		k(Math.max(1, o));
+	}, [S]);
+	u(() => {
+		D.current = [], k(Math.min(y.length, _));
+	}, [y.length]), u(() => {
+		let e = T.current;
+		if (!e || !S) return;
 		let t = new ResizeObserver(() => {
-			O(_.length);
+			A(y.length);
 		});
 		return t.observe(e), () => t.disconnect();
 	}, [
-		O,
-		b,
-		_.length
-	]), l(() => {
-		O(_.length);
+		A,
+		S,
+		y.length
+	]), u(() => {
+		A(y.length);
 	}, [
-		O,
-		_.length,
-		E
+		A,
+		y.length,
+		O
 	]);
-	let k = u(() => ({
+	let j = d(() => ({
 		...e,
-		stroke: S?.iconStrokeWidth ?? e.stroke,
-		size: S?.iconSize ?? e.size
-	}), [S?.iconStrokeWidth, S?.iconSize]);
-	if (_.length === 0) return null;
-	let A = b ? _.slice(0, E) : _, j = b ? _.slice(E) : [], M = j.map((e, t) => ({
+		stroke: w?.iconStrokeWidth ?? e.stroke,
+		size: w?.iconSize ?? e.size
+	}), [w?.iconStrokeWidth, w?.iconSize]);
+	if (y.length === 0) return null;
+	let M = S ? y.slice(0, O) : y, N = S ? y.slice(O) : [], P = N.map((e, t) => ({
 		key: String(t),
 		label: e.title,
-		onClick: () => v(e)
+		onClick: () => b(e)
 	}));
-	return /* @__PURE__ */ p("div", {
-		ref: C,
-		className: "mb-4 w-full",
-		children: /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ m("div", {
+		ref: T,
+		className: o("mb-4 w-full", g.root),
+		children: /* @__PURE__ */ h("div", {
 			role: "list",
-			"aria-label": x.list,
-			className: b ? "flex flex-wrap justify-center gap-2" : "flex flex-col items-center gap-2",
-			children: [A.map((e, n) => /* @__PURE__ */ p("div", {
+			"aria-label": C.list,
+			className: o(S ? "flex flex-wrap justify-center gap-2" : "flex flex-col items-center gap-2", g.list),
+			children: [M.map((e, n) => /* @__PURE__ */ m("div", {
 				role: "listitem",
 				ref: (e) => {
-					w.current[n] = e;
+					E.current[n] = e;
 				},
-				children: /* @__PURE__ */ p(i, {
+				children: /* @__PURE__ */ m(i, {
 					label: e.title,
 					appearance: t.Outlined,
-					onClick: () => v(e)
+					onClick: () => b(e)
 				})
-			}, e.const)), j.length > 0 && /* @__PURE__ */ p("div", {
+			}, e.const)), N.length > 0 && /* @__PURE__ */ m("div", {
 				role: "listitem",
-				children: /* @__PURE__ */ p(r, {
-					items: M,
+				children: /* @__PURE__ */ m(r, {
+					items: P,
 					placement: "bottom-end",
 					matchReferenceWidth: !1,
-					children: /* @__PURE__ */ p(a, {
+					children: /* @__PURE__ */ m(a, {
 						appearance: t.Outlined,
-						icon: p(y ? o : s, {
-							...k,
+						icon: m(x ? s : c, {
+							...j,
 							stroke: n
 						}),
-						"aria-label": x.overflow
+						"aria-label": C.overflow
 					})
 				})
 			})]
@@ -88,4 +91,4 @@ var h = 4, g = 8, _ = ({ starters: _, onSelect: v, isMobile: y, isCollapsible: b
 	});
 };
 //#endregion
-export { _ as StarterButtons };
+export { g as STARTER_BUTTONS_CLASS, y as StarterButtons };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-starter-buttons",
   "description": "Responsive starter prompt buttons that overflow into a dropdown when space is limited",
-  "version": "1.2.0-dev.6",
+  "version": "1.2.0-dev.61",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -9,6 +9,7 @@
   "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./styles.css": "./index.css",
     ".": {
       "types": "./index.d.ts",
       "import": "./index.js",
@@ -19,9 +20,9 @@
     "@tabler/icons-react": "^3.44.0"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.6",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.61",
     "react": "^19.2.8",
-    "@epam/ai-dial-ui-kit": "^0.14.2"
+    "@epam/ai-dial-ui-kit": "^0.15.0-dev.9"
   },
   "repository": {
     "type": "git",