@krosoft/react 0.0.292 → 0.0.293

package/dist/components/core/filters/SearchableFilterPill.d.ts

@@ -3,7 +3,7 @@ export interface FilterOption {
     label: string;
     color?: string;
 }
-export declare function SearchableFilterPill<T extends string>({ labelKey, options, selected, onToggle, onClear, onSelectAll, searchable, searchPlaceholder, }: {
+export declare function SearchableFilterPill<T extends string>({ labelKey, options, selected, onToggle, onClear, onSelectAll, searchable, searchPlaceholder, className, }: {
     labelKey: string;
     options: FilterOption[];
     selected: T[];
@@ -12,5 +12,6 @@ export declare function SearchableFilterPill<T extends string>({ labelKey, optio
     onSelectAll?: (values: T[]) => void;
     searchable?: boolean;
     searchPlaceholder?: string;
+    className?: string;
 }): React.ReactElement;
 //# sourceMappingURL=SearchableFilterPill.d.ts.map

package/dist/components/core/filters/SearchableFilterPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableFilterPill.d.ts","sourceRoot":"","sources":["../../../../src/components/core/filters/SearchableFilterPill.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EAAE,EACrD,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,iBAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,YAAY,CAyIrB"}
+{"version":3,"file":"SearchableFilterPill.d.ts","sourceRoot":"","sources":["../../../../src/components/core/filters/SearchableFilterPill.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EAAE,EACrD,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,iBAAiB,EACjB,SAAiC,GAClC,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CA4IrB"}

package/dist/components/core/filters/index.js

@@ -275,24 +275,26 @@ function G({ options: e, value: t, onChange: n, variant: r = "solid" }) {
 }
 //#endregion
 //#region src/components/core/filters/SearchableFilterPill.tsx
-function K({ labelKey: n, options: r, selected: o, onToggle: s, onClear: c, onSelectAll: u, searchable: f = !1, searchPlaceholder: m }) {
-	let { t: h } = t(), [g, _] = k(""), v = o.length > 0, y = O(() => g === "" ? r : r.filter((e) => e.label.toLowerCase().includes(g.toLowerCase())), [r, g]), b = O(() => y.length !== 0 && y.every((e) => o.includes(e.value)), [y, o]);
+function K({ labelKey: n, options: r, selected: o, onToggle: s, onClear: c, onSelectAll: u, searchable: f = !1, searchPlaceholder: m, className: h = "w-full md:w-[180px]" }) {
+	let { t: g } = t(), [_, v] = k(""), y = o.length > 0, b = O(() => _ === "" ? r : r.filter((e) => e.label.toLowerCase().includes(_.toLowerCase())), [r, _]), x = O(() => b.length !== 0 && b.every((e) => o.includes(e.value)), [b, o]);
 	return /* @__PURE__ */ j(p, {
 		onOpenChange: () => {
-			_("");
+			v("");
 		},
 		children: [/* @__PURE__ */ A(l, {
 			asChild: !0,
 			children: /* @__PURE__ */ j("button", {
-				className: e(a, "inline-flex items-center gap-1.5 whitespace-nowrap transition-colors", v ? "border-primary bg-primary/10 text-primary font-medium" : "hover:bg-muted"),
-				children: [
-					h(n),
-					o.length > 0 && /* @__PURE__ */ A("span", {
+				className: e(a, "inline-flex items-center justify-between gap-1.5 whitespace-nowrap transition-colors", y ? "border-primary bg-primary/10 text-primary font-medium" : "hover:bg-muted", h),
+				children: [/* @__PURE__ */ A("span", {
+					className: "truncate",
+					children: g(n)
+				}), /* @__PURE__ */ j("div", {
+					className: "flex shrink-0 items-center gap-1.5",
+					children: [o.length > 0 && /* @__PURE__ */ A("span", {
 						className: "flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground",
 						children: o.length
-					}),
-					/* @__PURE__ */ A(N, { className: "size-3.5 opacity-60" })
-				]
+					}), /* @__PURE__ */ A(N, { className: "size-3.5 opacity-60" })]
+				})]
 			})
 		}), /* @__PURE__ */ j(d, {
 			className: "w-72 max-w-[var(--radix-popover-content-available-width)] p-0",
@@ -304,10 +306,10 @@ function K({ labelKey: n, options: r, selected: o, onToggle: s, onClear: c, onSe
 						className: "relative",
 						children: [/* @__PURE__ */ A(F, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ A("input", {
 							className: "w-full rounded-control bg-muted/50 py-1.5 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring",
-							placeholder: m ?? h("search.placeholder"),
-							value: g,
+							placeholder: m ?? g("search.placeholder"),
+							value: _,
 							onChange: (e) => {
-								_(e.target.value);
+								v(e.target.value);
 							},
 							autoFocus: !0
 						})]
@@ -315,10 +317,10 @@ function K({ labelKey: n, options: r, selected: o, onToggle: s, onClear: c, onSe
 				}) : null,
 				/* @__PURE__ */ j("div", {
 					className: "flex flex-col gap-0.5 max-h-56 overflow-y-auto overflow-x-hidden p-1.5",
-					children: [y.length === 0 && /* @__PURE__ */ A("p", {
+					children: [b.length === 0 && /* @__PURE__ */ A("p", {
 						className: "px-2 py-3 text-center text-xs text-muted-foreground",
-						children: h("states.noResult")
-					}), y.map((e) => /* @__PURE__ */ j("label", {
+						children: g("states.noResult")
+					}), b.map((e) => /* @__PURE__ */ j("label", {
 						className: "flex min-w-0 items-center gap-2.5 rounded-md px-2 py-2 text-sm hover:bg-muted cursor-pointer transition-colors",
 						children: [
 							/* @__PURE__ */ A("span", {
@@ -342,37 +344,37 @@ function K({ labelKey: n, options: r, selected: o, onToggle: s, onClear: c, onSe
 						]
 					}, e.value))]
 				}),
-				y.length > 0 && /* @__PURE__ */ A("div", {
+				b.length > 0 && /* @__PURE__ */ A("div", {
 					className: "border-t border-border p-1.5",
-					children: b ? /* @__PURE__ */ A("button", {
+					children: x ? /* @__PURE__ */ A("button", {
 						onClick: () => {
 							c === void 0 ? o.forEach((e) => {
 								s(e);
 							}) : c();
 						},
 						className: "w-full rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-center",
-						children: h("filters.deselectAll")
+						children: g("filters.deselectAll")
 					}) : /* @__PURE__ */ A("button", {
 						type: "button",
 						onClick: () => {
-							if (b) {
+							if (x) {
 								if (u !== void 0) {
-									let e = y.map((e) => e.value);
+									let e = b.map((e) => e.value);
 									u(o.filter((t) => !e.includes(t)));
 								} else c === void 0 ? o.forEach((e) => {
 									s(e);
 								}) : c();
 							} else if (u !== void 0) {
 								let e = [...o];
-								y.forEach((t) => {
+								b.forEach((t) => {
 									e.includes(t.value) || e.push(t.value);
 								}), u(e);
-							} else y.forEach((e) => {
+							} else b.forEach((e) => {
 								o.includes(e.value) || s(e.value);
 							});
 						},
 						className: "w-full rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-center",
-						children: h("filters.selectAll")
+						children: g("filters.selectAll")
 					})
 				})
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krosoft/react",
-  "version": "0.0.292",
+  "version": "0.0.293",
   "description": "Krosoft shared React package",
   "type": "module",
   "scripts": {