@selectwin/kit 0.1.205 → 0.1.206

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/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';