@selectwin/kit 0.1.204 → 0.1.206

package/dist/SelectCollapsible.d.ts

@@ -3,6 +3,10 @@ type SelectCollapsibleOwnProps = {
     title: ReactNode;
     children: ReactNode;
     defaultOpen?: boolean;
+    /** 0.1.205: o aberto controlado pela tela (com `onOpenChange`). */
+    open?: boolean;
+    /** 0.1.205: o cabeçalho pediu para abrir (`true`) ou fechar (`false`). */
+    onOpenChange?: (open: boolean) => void;
     plain?: boolean;
 };
 export type SelectCollapsibleProps = SelectCollapsibleOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectCollapsibleOwnProps>;

package/dist/SelectCollapsible.js

@@ -1,40 +1,45 @@
 import { ChevronDownIcon as e } from "./icons.js";
-import { forwardRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { inertProps as t } from "./internal/inert.js";
+import { forwardRef as n, useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/SelectCollapsible.tsx
-var a = t(function({ title: t, children: a, defaultOpen: o = !1, plain: s = !1, className: c, ...l }, u) {
-	let [d, f] = n(o);
-	return /* @__PURE__ */ i("div", {
-		ref: u,
-		...l,
-		className: `select-collapsible${s ? " select-collapsible--plain" : ""}${d ? " is-open" : ""}${c ? " " + c : ""}`,
-		children: [/* @__PURE__ */ i("button", {
+var s = n(function({ title: n, children: s, defaultOpen: c = !1, open: l, onOpenChange: u, plain: d = !1, className: f, ...p }, m) {
+	let [h, g] = i(c), _ = l ?? h, v = r(), y = () => {
+		l === void 0 && g(!_), u == null || u(!_);
+	};
+	return /* @__PURE__ */ o("div", {
+		ref: m,
+		...p,
+		className: `select-collapsible${d ? " select-collapsible--plain" : ""}${_ ? " is-open" : ""}${f ? " " + f : ""}`,
+		children: [/* @__PURE__ */ o("button", {
 			type: "button",
 			className: "select-collapsible__header",
-			onClick: () => f((e) => !e),
-			"aria-expanded": d,
-			children: [/* @__PURE__ */ r("span", {
+			onClick: y,
+			"aria-expanded": _,
+			"aria-controls": v,
+			children: [/* @__PURE__ */ a("span", {
 				className: "select-collapsible__title",
-				children: t
-			}), /* @__PURE__ */ r("span", {
+				children: n
+			}), /* @__PURE__ */ a("span", {
 				className: "select-collapsible__chevron",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ r(e, {})
+				children: /* @__PURE__ */ a(e, {})
 			})]
-		}), /* @__PURE__ */ r("div", {
+		}), /* @__PURE__ */ a("div", {
 			className: "select-collapsible__bodywrap",
-			children: /* @__PURE__ */ r("div", {
+			children: /* @__PURE__ */ a("div", {
+				id: v,
 				className: "select-collapsible__bodyclip",
-				"aria-hidden": !d,
-				children: /* @__PURE__ */ r("div", {
+				...t(!_),
+				children: /* @__PURE__ */ a("div", {
 					className: "select-collapsible__body",
-					children: a
+					children: s
 				})
 			})
 		})]
 	});
 });
 //#endregion
-export { a as SelectCollapsible };
+export { s as SelectCollapsible };
 
 //# sourceMappingURL=SelectCollapsible.js.map

package/dist/SelectPage.d.ts

@@ -7,13 +7,28 @@ export interface SelectPageAction {
     loading?: boolean;
     icon?: ReactNode;
 }
-type SelectPageOwnProps = {
+export interface SelectPageBack {
+    /** O clique. Com `to`, roda antes da navegação do link. */
+    onAction?: () => void;
+    /** 0.1.206: o endereço do app — o voltar é o `<Link>` do roteador (abre em outra aba, copia o endereço). */
+    to?: string;
+    /** O nome do voltar para o leitor de tela (o padrão: "Voltar"). */
+    content?: string;
+}
+/** O cabeçalho da página: o voltar, o contexto, o título, o meta, a descrição, as ações e o destaque (0.1.206). */
+export type SelectPageHeaderProps = {
     title?: ReactNode;
     subtitle?: ReactNode;
     /** Acima do título, em caixa-alta espaçada ("Produção · Segunda, 02 de novembro") — 0.1.188, o tom corporativo. */
     eyebrow?: ReactNode;
-    /** Um filete separa o cabeçalho do conteúdo (as telas de painel, como o Início). */
-    divided?: boolean;
+    /** 0.1.206: a linha acima do título, antes do `eyebrow` (a organização e o workspace, com o trocador). */
+    context?: ReactNode;
+    /** 0.1.206: os avisos da página, em pilha acima do cabeçalho (a conta em análise, o limite do mês). */
+    notices?: ReactNode;
+    /** 0.1.206: uma linha sob o título (o estado, as etiquetas). */
+    meta?: ReactNode;
+    /** 0.1.206: um destaque à direita (o carrossel das análises). Com ele, as ações vão para baixo do texto. */
+    aside?: ReactNode;
     primaryAction?: SelectPageAction;
     secondaryActions?: SelectPageAction[];
     /** Custom node in the header action area (e.g. an "Ações" overflow menu on detail
@@ -23,17 +38,26 @@ type SelectPageOwnProps = {
     backAction?: SelectPageBack | null;
     /** Os níveis de CIMA da página, sobre o título ("Club › Cursos"); o título é o nível atual. */
     breadcrumbs?: SelectBreadcrumbItem[];
+};
+type SelectPageOwnProps = SelectPageHeaderProps & {
+    /** Um filete separa o cabeçalho do conteúdo (as telas de painel, como o Início). */
+    divided?: boolean;
     children: ReactNode;
 };
-export interface SelectPageBack {
-    onAction: () => void;
-    content?: string;
-}
 /** O voltar das páginas que não dizem o seu (ex.: a tela anterior do app). */
 export declare function SelectPageBackProvider({ value, children }: {
     value: SelectPageBack | null;
     children: ReactNode;
 }): import("react").JSX.Element;
+/**
+ * O cabeçalho da página sozinho (0.1.206), para a moldura que já dá a coluna da página. Devolve os avisos e a linha do
+ * cabeçalho lado a lado (sem uma caixa em volta): dentro da SelectPage, eles são filhos da coluna dela.
+ */
+export declare function SelectPageHeader({ title, subtitle, eyebrow, context, notices, meta, aside, primaryAction, secondaryActions, headerActions, backAction: ownBack, breadcrumbs, }: SelectPageHeaderProps): import("react").JSX.Element;
 export type SelectPageProps = SelectPageOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectPageOwnProps>;
-export declare const SelectPage: import('react').ForwardRefExoticComponent<SelectPageOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectPageOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectPage: import('react').ForwardRefExoticComponent<SelectPageHeaderProps & {
+    /** Um filete separa o cabeçalho do conteúdo (as telas de painel, como o Início). */
+    divided?: boolean;
+    children: ReactNode;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | keyof SelectPageHeaderProps | "divided"> & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/SelectPage.js

@@ -1,85 +1,135 @@
 /* empty css           */
 import { SelectButton as e } from "./SelectButton.js";
-import { ArrowLeftIcon as t } from "./icons.js";
-import { useSelectMessages as n } from "./SelectLocale.js";
-import { SelectBreadcrumb as r } from "./SelectBreadcrumb.js";
-import { createContext as i, forwardRef as a, useContext as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { safeHref as t } from "./internal/safeHref.js";
+import { ArrowLeftIcon as n } from "./icons.js";
+import { useSelectMessages as r } from "./SelectLocale.js";
+import { SelectBreadcrumb as i } from "./SelectBreadcrumb.js";
+import { createContext as a, forwardRef as o, useContext as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Link as d } from "react-router-dom";
 //#region src/SelectPage.tsx
-var l = i(null);
-function u({ value: e, children: t }) {
-	return /* @__PURE__ */ s(l.Provider, {
+var f = a(null);
+function p({ value: e, children: t }) {
+	return /* @__PURE__ */ l(f.Provider, {
 		value: e,
 		children: t
 	});
 }
-var d = a(function({ title: i, subtitle: a, eyebrow: u, divided: d = !1, primaryAction: f, secondaryActions: p, headerActions: m, backAction: h, breadcrumbs: g, children: _, className: v, ...y }, b) {
-	let x = n(), S = o(l), C = h === null ? null : h ?? S, w = !!f || p && p.length > 0 || !!m, T = C || i || a || u || w;
-	return /* @__PURE__ */ c("div", {
-		ref: b,
-		...y,
-		className: `select select-page${d ? " select-page--divided" : ""}${v ? " " + v : ""}`,
-		children: [T && /* @__PURE__ */ c("div", {
-			className: "select-page__header",
-			children: [/* @__PURE__ */ c("div", {
+function m({ back: e, label: r }) {
+	let i = e.to === void 0 ? void 0 : t(e.to);
+	return i === void 0 ? /* @__PURE__ */ l("button", {
+		type: "button",
+		className: "select-page__back",
+		onClick: e.onAction,
+		"aria-label": r,
+		children: /* @__PURE__ */ l(n, {})
+	}) : /* @__PURE__ */ l(d, {
+		to: i,
+		className: "select-page__back",
+		"aria-label": r,
+		onClick: e.onAction,
+		children: /* @__PURE__ */ l(n, {})
+	});
+}
+function h({ title: t, subtitle: n, eyebrow: a, context: o, notices: d, meta: p, aside: h, primaryAction: g, secondaryActions: _, headerActions: v, backAction: y, breadcrumbs: b }) {
+	let x = r(), S = s(f), C = y === null ? null : y ?? S, w = !!g || _ && _.length > 0 || !!v, T = C || t || n || a || w || o || p || h, E = w ? /* @__PURE__ */ u("div", {
+		className: `select-page__actions${h ? " select-page__actions--below" : ""}`,
+		children: [
+			_ == null ? void 0 : _.map((t, n) => /* @__PURE__ */ l(e, {
+				variant: "secondary",
+				size: "sm",
+				inline: !0,
+				icon: t.icon,
+				disabled: t.disabled,
+				loading: t.loading,
+				onClick: t.onAction,
+				children: t.content
+			}, n)),
+			g && /* @__PURE__ */ l(e, {
+				variant: "primary",
+				size: "sm",
+				inline: !0,
+				icon: g.icon,
+				disabled: g.disabled,
+				loading: g.loading,
+				onClick: g.onAction,
+				children: g.content
+			}),
+			v
+		]
+	}) : null;
+	return /* @__PURE__ */ u(c, { children: [d != null && d !== !1 && /* @__PURE__ */ l("div", {
+		className: "select-page__notices",
+		children: d
+	}), T && /* @__PURE__ */ u("div", {
+		className: `select-page__header${h ? " select-page__header--aside" : ""}`,
+		children: [
+			/* @__PURE__ */ u("div", {
 				className: "select-page__heading",
-				children: [C && /* @__PURE__ */ s("button", {
-					type: "button",
-					className: "select-page__back",
-					onClick: C.onAction,
-					"aria-label": C.content ?? x.common.back,
-					children: /* @__PURE__ */ s(t, {})
-				}), /* @__PURE__ */ c("div", {
+				children: [C && /* @__PURE__ */ l(m, {
+					back: C,
+					label: C.content ?? x.common.back
+				}), /* @__PURE__ */ u("div", {
 					className: "select-page__head",
 					children: [
-						g && g.length > 0 && /* @__PURE__ */ s(r, {
-							items: g,
+						b && b.length > 0 && /* @__PURE__ */ l(i, {
+							items: b,
 							lastIsCurrent: !1
 						}),
-						u && /* @__PURE__ */ s("p", {
+						o && /* @__PURE__ */ l("div", {
+							className: "select-page__context",
+							children: o
+						}),
+						a && /* @__PURE__ */ l("p", {
 							className: "select-page__eyebrow",
-							children: u
+							children: a
 						}),
-						i && /* @__PURE__ */ s("h1", {
+						t && /* @__PURE__ */ l("h1", {
 							className: "select-page__title",
-							children: i
+							children: t
 						}),
-						a && /* @__PURE__ */ s("p", {
+						p && /* @__PURE__ */ l("div", {
+							className: "select-page__meta",
+							children: p
+						}),
+						n && /* @__PURE__ */ l("p", {
 							className: "select-page__subtitle",
-							children: a
-						})
+							children: n
+						}),
+						h && E
 					]
 				})]
-			}), w && /* @__PURE__ */ c("div", {
-				className: "select-page__actions",
-				children: [
-					p == null ? void 0 : p.map((t, n) => /* @__PURE__ */ s(e, {
-						variant: "secondary",
-						size: "sm",
-						inline: !0,
-						icon: t.icon,
-						disabled: t.disabled,
-						loading: t.loading,
-						onClick: t.onAction,
-						children: t.content
-					}, n)),
-					f && /* @__PURE__ */ s(e, {
-						variant: "primary",
-						size: "sm",
-						inline: !0,
-						icon: f.icon,
-						disabled: f.disabled,
-						loading: f.loading,
-						onClick: f.onAction,
-						children: f.content
-					}),
-					m
-				]
-			})]
-		}), _]
+			}),
+			!h && E,
+			h && /* @__PURE__ */ l("div", {
+				className: "select-page__aside",
+				children: h
+			})
+		]
+	})] });
+}
+var g = o(function({ title: e, subtitle: t, eyebrow: n, context: r, notices: i, meta: a, aside: o, divided: s = !1, primaryAction: c, secondaryActions: d, headerActions: f, backAction: p, breadcrumbs: m, children: g, className: _, ...v }, y) {
+	return /* @__PURE__ */ u("div", {
+		ref: y,
+		...v,
+		className: `select select-page${s ? " select-page--divided" : ""}${_ ? " " + _ : ""}`,
+		children: [/* @__PURE__ */ l(h, {
+			title: e,
+			subtitle: t,
+			eyebrow: n,
+			context: r,
+			notices: i,
+			meta: a,
+			aside: o,
+			primaryAction: c,
+			secondaryActions: d,
+			headerActions: f,
+			backAction: p,
+			breadcrumbs: m
+		}), g]
 	});
 });
 //#endregion
-export { d as SelectPage, u as SelectPageBackProvider };
+export { g as SelectPage, p as SelectPageBackProvider, h as SelectPageHeader };
 
 //# sourceMappingURL=SelectPage.js.map

package/dist/SelectSection.d.ts

@@ -15,6 +15,10 @@ type SelectSectionOwnProps = {
     collapsible?: boolean;
     /** Initial open state when collapsible. Default open. */
     defaultOpen?: boolean;
+    /** 0.1.205: o aberto controlado pela tela (com `onOpenChange`); sem ele, a seção guarda o estado (`defaultOpen`). */
+    open?: boolean;
+    /** 0.1.205: o cabeçalho pediu para abrir (`true`) ou fechar (`false`). */
+    onOpenChange?: (open: boolean) => void;
     /**
      * Linha de rodapé na moldura cinza, sob o corpo (0.1.135) — a nota que vale para o card inteiro
      * ("A mesma compra não conta duas vezes…"). Fica FORA do corpo para não virar um segundo filho

package/dist/SelectSection.js

@@ -2,82 +2,87 @@
 import { ChevronDownIcon as e } from "./icons.js";
 import { SelectInfoTip as t } from "./SelectInfoTip.js";
 import { FrameBody as n, useInsideFrame as r } from "./internal/frame.js";
-import { forwardRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { inertProps as i } from "./internal/inert.js";
+import { forwardRef as a, useId as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/SelectSection.tsx
-var c = i(function({ title: i, help: c, description: l, action: u, collapsible: d = !1, defaultOpen: f = !0, footer: p, flush: m = !1, children: h, className: g, ..._ }, v) {
-	let [y, b] = a(f), x = (r() ? " select-section--nested" : "") + (m ? " select-section--flush" : "");
-	return d ? /* @__PURE__ */ s("div", {
-		ref: v,
-		..._,
-		className: `select-section select-section--collapsible${x}${y ? " is-open" : ""}${g ? " " + g : ""}`,
-		children: [/* @__PURE__ */ s("button", {
+var u = a(function({ title: a, help: u, description: d, action: f, collapsible: p = !1, defaultOpen: m = !0, open: h, onOpenChange: g, footer: _, flush: v = !1, children: y, className: b, ...x }, S) {
+	let [C, w] = s(m), T = h ?? C, E = o(), D = () => {
+		h === void 0 && w(!T), g == null || g(!T);
+	}, O = (r() ? " select-section--nested" : "") + (v ? " select-section--flush" : "");
+	return p ? /* @__PURE__ */ l("div", {
+		ref: S,
+		...x,
+		className: `select-section select-section--collapsible${O}${T ? " is-open" : ""}${b ? " " + b : ""}`,
+		children: [/* @__PURE__ */ l("button", {
 			type: "button",
 			className: "select-section__head select-section__head--toggle",
-			"aria-expanded": y,
-			onClick: () => b((e) => !e),
-			children: [/* @__PURE__ */ s("span", {
+			"aria-expanded": T,
+			"aria-controls": E,
+			onClick: D,
+			children: [/* @__PURE__ */ l("span", {
 				className: "select-section__heading",
-				children: [i && /* @__PURE__ */ o("span", {
+				children: [a && /* @__PURE__ */ c("span", {
 					className: "select-section__title",
-					children: i
-				}), l && /* @__PURE__ */ o("span", {
+					children: a
+				}), d && /* @__PURE__ */ c("span", {
 					className: "select-section__desc",
-					children: l
+					children: d
 				})]
-			}), /* @__PURE__ */ o("span", {
+			}), /* @__PURE__ */ c("span", {
 				className: "select-section__chevron",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ o(e, {})
+				children: /* @__PURE__ */ c(e, {})
 			})]
-		}), /* @__PURE__ */ o("div", {
+		}), /* @__PURE__ */ c("div", {
+			id: E,
 			className: "select-section__collapse",
-			"data-open": y,
-			"aria-hidden": !y,
-			children: /* @__PURE__ */ s("div", {
+			"data-open": T,
+			...i(!T),
+			children: /* @__PURE__ */ l("div", {
 				className: "select-section__collapsewrap",
-				children: [/* @__PURE__ */ o("div", {
+				children: [/* @__PURE__ */ c("div", {
 					className: "select-section__body",
-					children: /* @__PURE__ */ o(n, { children: h })
-				}), p != null && p !== "" && /* @__PURE__ */ o("div", {
+					children: /* @__PURE__ */ c(n, { children: y })
+				}), _ != null && _ !== "" && /* @__PURE__ */ c("div", {
 					className: "select-section__foot",
-					children: p
+					children: _
 				})]
 			})
 		})]
-	}) : /* @__PURE__ */ s("div", {
-		ref: v,
-		..._,
-		className: `select-section${x}${g ? " " + g : ""}`,
+	}) : /* @__PURE__ */ l("div", {
+		ref: S,
+		...x,
+		className: `select-section${O}${b ? " " + b : ""}`,
 		children: [
-			(i || l || u) && /* @__PURE__ */ s("div", {
+			(a || d || f) && /* @__PURE__ */ l("div", {
 				className: "select-section__head",
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ l("div", {
 					className: "select-section__heading",
-					children: [i && /* @__PURE__ */ s("h2", {
-						className: `select-section__title${c == null ? "" : " select-section__title--help"}`,
-						children: [i, c != null && /* @__PURE__ */ o(t, { content: c })]
-					}), l && /* @__PURE__ */ o("p", {
+					children: [a && /* @__PURE__ */ l("h2", {
+						className: `select-section__title${u == null ? "" : " select-section__title--help"}`,
+						children: [a, u != null && /* @__PURE__ */ c(t, { content: u })]
+					}), d && /* @__PURE__ */ c("p", {
 						className: "select-section__desc",
-						children: l
+						children: d
 					})]
-				}), u ? /* @__PURE__ */ o("div", {
+				}), f ? /* @__PURE__ */ c("div", {
 					className: "select-section__action",
-					children: u
+					children: f
 				}) : null]
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ c("div", {
 				className: "select-section__body",
-				children: /* @__PURE__ */ o(n, { children: h })
+				children: /* @__PURE__ */ c(n, { children: y })
 			}),
-			p != null && p !== "" && /* @__PURE__ */ o("div", {
+			_ != null && _ !== "" && /* @__PURE__ */ c("div", {
 				className: "select-section__foot",
-				children: p
+				children: _
 			})
 		]
 	});
 });
 //#endregion
-export { c as SelectSection };
+export { u as SelectSection };
 
 //# sourceMappingURL=SelectSection.js.map

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export { SelectPasswordStrength, passwordScore, type SelectPasswordRule } from '
 export { SelectLoader, type SelectLoaderProps } from './SelectLoader';
 export { SelectText } from './SelectText';
 export { SelectBox, SelectStack, SelectInline, SelectGrid } from './SelectLayout';
-export { SelectPage, SelectPageBackProvider } from './SelectPage';
+export { SelectPage, SelectPageBackProvider, SelectPageHeader } from './SelectPage';
 export { SelectFormLayout } from './SelectFormLayout';
 export { SelectSkeleton } from './SelectSkeleton';
 export { SelectIcon } from './SelectIcon';
@@ -287,7 +287,7 @@ export type { SelectKeyValuePair, SelectKeyValueEditorProps } from './SelectKeyV
 export type { SelectBankAccount, SelectBankOption } from './SelectBankAccountField';
 export type { SelectSpace } from './spacing';
 export type { SelectTextVariant, SelectTextTone, SelectFontWeight } from './SelectText';
-export type { SelectPageAction, SelectPageBack } from './SelectPage';
+export type { SelectPageAction, SelectPageBack, SelectPageHeaderProps } from './SelectPage';
 export type { SelectIconTone, SelectIconSize } from './SelectIcon';
 export type { SelectPlacement } from './positioning';
 export type { SelectAction, SelectActionSection } from './SelectActionList';