@selectwin/kit 0.1.107 → 0.1.109

package/README.md

@@ -1,29 +1,29 @@
-# @selectwin/kit
-
-Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
-gráficos) e tokens CSS, theme-aware (light/dark).
-
-Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
-não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
-
-## Uso
-
-```bash
-npm i @selectwin/kit
-```
-
-```tsx
-import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
-import { SelectButton, SelectSection } from '@selectwin/kit';
-```
-
-Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
-**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
-
-## Build
-
-```bash
-npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
-```
-
-`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).
+# @selectwin/kit
+
+Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
+gráficos) e tokens CSS, theme-aware (light/dark).
+
+Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
+não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
+
+## Uso
+
+```bash
+npm i @selectwin/kit
+```
+
+```tsx
+import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
+import { SelectButton, SelectSection } from '@selectwin/kit';
+```
+
+Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
+**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
+
+## Build
+
+```bash
+npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
+```
+
+`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).

package/dist/SelectFilterBar.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
 export interface SelectFilterDef {
     key: string;
     label: string;
@@ -33,6 +33,18 @@ type SelectFilterBarOwnProps = {
         onChange: (value: string) => void;
         placeholder?: string;
     };
+    /**
+     * Recortes que não são faceta — a vista num `SelectSegmented`, um seletor de entidade com busca
+     * própria — na MESMA fileira da barra, antes da busca. Passe um fragmento: cada controle vira
+     * item da fileira, com o mesmo passo, a mesma altura e a mesma quebra das facetas, e as tags
+     * aplicadas continuam embaixo de todos.
+     *
+     * Por que existe: montados ao LADO da barra (num `SelectInline` junto com ela), os dois viram
+     * contêineres flex aninhados. A barra dimensiona pelo max-content e a fileira dela quebra por
+     * dentro — a busca sobe, "Mais filtros" desce sozinho — e, quando a fileira de tags aparece, a
+     * barra fica mais alta e o controle vizinho desce para o meio dela.
+     */
+    leading?: ReactNode;
     disabled?: boolean;
 };
 export type SelectFilterBarProps = SelectFilterBarOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectFilterBarOwnProps>;

package/dist/index.js

@@ -7675,19 +7675,20 @@ function yo({ filter: e, value: t, onChange: n, open: r, onToggle: i, onClose: a
 		]
 	});
 }
-var bo = r(function({ filters: e, values: t, onChange: n, onClearAll: r, search: i, disabled: a, className: o, ...s }, c) {
-	let [l, u] = d([]), [f, p] = d(null), [g, _] = d(!1), v = (e) => (t[e.key] ?? "").trim() !== "", y = (e) => !!e.pinned || v(e) || l.includes(e.key), b = e.filter(y), x = e.filter((e) => !y(e)), S = e.filter(v), C = () => {
-		u([]), p(null), r();
-	}, w = (e) => {
-		u((t) => t.includes(e) ? t : [...t, e]), _(!1), p(e);
+var bo = r(function({ filters: e, values: t, onChange: n, onClearAll: r, search: i, leading: a, disabled: o, className: s, ...c }, l) {
+	let [u, f] = d([]), [p, g] = d(null), [_, v] = d(!1), y = (e) => (t[e.key] ?? "").trim() !== "", b = (e) => !!e.pinned || y(e) || u.includes(e.key), x = e.filter(b), S = e.filter((e) => !b(e)), C = e.filter(y), w = () => {
+		f([]), g(null), r();
+	}, T = (e) => {
+		f((t) => t.includes(e) ? t : [...t, e]), v(!1), g(e);
 	};
 	return /* @__PURE__ */ h("div", {
-		ref: c,
-		...s,
-		className: `select-filterbar${o ? " " + o : ""}`,
+		ref: l,
+		...c,
+		className: `select-filterbar${s ? " " + s : ""}`,
 		children: [/* @__PURE__ */ h("div", {
 			className: "select-filterbar__row",
 			children: [
+				a,
 				i && /* @__PURE__ */ h("div", {
 					className: "select-filterbar__query",
 					children: [
@@ -7702,7 +7703,7 @@ var bo = r(function({ filters: e, values: t, onChange: n, onClearAll: r, search:
 							value: i.value,
 							placeholder: i.placeholder ?? "Buscar…",
 							onChange: (e) => i.onChange(e.target.value),
-							disabled: a
+							disabled: o
 						}),
 						i.value && /* @__PURE__ */ m("button", {
 							type: "button",
@@ -7713,25 +7714,25 @@ var bo = r(function({ filters: e, values: t, onChange: n, onClearAll: r, search:
 						})
 					]
 				}),
-				b.map((e) => /* @__PURE__ */ m(yo, {
+				x.map((e) => /* @__PURE__ */ m(yo, {
 					filter: e,
 					value: t[e.key] ?? "",
 					onChange: (t) => n(e.key, t),
-					open: f === e.key,
-					onToggle: () => p((t) => t === e.key ? null : e.key),
-					onClose: () => p((t) => t === e.key ? null : t),
-					disabled: a
+					open: p === e.key,
+					onToggle: () => g((t) => t === e.key ? null : e.key),
+					onClose: () => g((t) => t === e.key ? null : t),
+					disabled: o
 				}, e.key)),
-				x.length > 0 && /* @__PURE__ */ m(fn, {
-					active: g,
-					onClose: () => _(!1),
+				S.length > 0 && /* @__PURE__ */ m(fn, {
+					active: _,
+					onClose: () => v(!1),
 					placement: "bottom-start",
 					activator: /* @__PURE__ */ h("button", {
 						type: "button",
 						className: "select-facet select-facet--more",
-						onClick: () => _((e) => !e),
-						disabled: a,
-						"aria-expanded": g,
+						onClick: () => v((e) => !e),
+						disabled: o,
+						"aria-expanded": _,
 						children: [/* @__PURE__ */ m("span", {
 							className: "select-facet__addicon",
 							"aria-hidden": "true",
@@ -7741,19 +7742,19 @@ var bo = r(function({ filters: e, values: t, onChange: n, onClearAll: r, search:
 					children: /* @__PURE__ */ m("div", {
 						className: "select-facet__options",
 						role: "menu",
-						children: x.map((e) => /* @__PURE__ */ m("button", {
+						children: S.map((e) => /* @__PURE__ */ m("button", {
 							type: "button",
 							role: "menuitem",
 							className: "select-facet__opt",
-							onClick: () => w(e.key),
+							onClick: () => T(e.key),
 							children: /* @__PURE__ */ m("span", { children: e.label })
 						}, e.key))
 					})
 				})
 			]
-		}), S.length > 0 && /* @__PURE__ */ h("div", {
+		}), C.length > 0 && /* @__PURE__ */ h("div", {
 			className: "select-filterbar__applied",
-			children: [S.map((e) => /* @__PURE__ */ h("span", {
+			children: [C.map((e) => /* @__PURE__ */ h("span", {
 				className: `select-filterbar__tag${e.error ? " is-error" : ""}`,
 				title: e.error || void 0,
 				children: [
@@ -7771,7 +7772,7 @@ var bo = r(function({ filters: e, values: t, onChange: n, onClearAll: r, search:
 			}, e.key)), /* @__PURE__ */ m("button", {
 				type: "button",
 				className: "select-filterbar__clear",
-				onClick: C,
+				onClick: w,
 				children: "Limpar tudo"
 			})]
 		})]