@selectwin/kit 0.1.205 → 0.1.207

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/SelectSkeleton.d.ts

@@ -8,10 +8,13 @@ declare function SkeletonThumbnail({ size }: {
     size?: 'small' | 'medium' | 'large';
 }): import("react").JSX.Element;
 /** Área de conteúdo não-textual carregando (chart, mapa, imagem, preview): retângulo
- *  shimmer com 100% da largura do pai e a altura dada. */
-declare function SkeletonBlock({ height, aspectRatio }: {
+ *  shimmer com 100% da largura do pai e a altura dada. 0.1.207: `width` (o número grande
+ *  de um cartão, a bolha de uma conversa) e `className` (o alinhamento no pai). */
+declare function SkeletonBlock({ height, aspectRatio, width, className, }: {
     height?: number | string;
     aspectRatio?: string;
+    width?: number | string;
+    className?: string;
 }): import("react").JSX.Element;
 /** Um campo de formulário carregando: o rótulo curto e a caixa do controle na altura real. */
 declare function SkeletonField({ tall }: {
@@ -23,6 +26,12 @@ declare function SkeletonRow({ media, action, boxed }: {
     action?: boolean;
     boxed?: boolean;
 }): import("react").JSX.Element;
+/** As linhas de uma tabela carregando (0.1.207), fora do SelectDataTable: `columns` colunas (a primeira mais larga, a
+ *  última à direita), `rows` linhas, os tamanhos variando de uma linha para a outra. A forma da tabela que vem. */
+declare function SkeletonTable({ columns, rows }: {
+    columns?: number;
+    rows?: number;
+}): import("react").JSX.Element;
 export declare const SelectSkeleton: (({ lines }: {
     lines?: number;
 }) => import("react").JSX.Element) & {
@@ -32,5 +41,6 @@ export declare const SelectSkeleton: (({ lines }: {
     Block: typeof SkeletonBlock;
     Field: typeof SkeletonField;
     Row: typeof SkeletonRow;
+    Table: typeof SkeletonTable;
 };
 export {};

package/dist/SelectSkeleton.js

@@ -4,19 +4,33 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 function n({ lines: t = 3 }) {
 	return /* @__PURE__ */ e("div", {
 		className: "select-skel-body",
+		"aria-hidden": "true",
 		children: Array.from({ length: Math.max(1, t) }, (t, n) => /* @__PURE__ */ e("div", { className: "select-skeleton select-skel-line" }, n))
 	});
 }
 function r({ size: t = "medium" }) {
-	return /* @__PURE__ */ e("div", { className: `select-skeleton select-skel-display select-skel-display--${t}` });
+	return /* @__PURE__ */ e("div", {
+		className: `select-skeleton select-skel-display select-skel-display--${t}`,
+		"aria-hidden": "true"
+	});
 }
 function i({ size: t = "medium" }) {
-	return /* @__PURE__ */ e("div", { className: `select-skeleton select-skel-thumb select-skel-thumb--${t}` });
+	return /* @__PURE__ */ e("div", {
+		className: `select-skeleton select-skel-thumb select-skel-thumb--${t}`,
+		"aria-hidden": "true"
+	});
 }
-function a({ height: t = 240, aspectRatio: n }) {
+function a({ height: t = 240, aspectRatio: n, width: r, className: i }) {
 	return /* @__PURE__ */ e("div", {
-		className: "select-skeleton select-skel-block",
-		style: n ? { aspectRatio: n } : { height: t }
+		className: `select-skeleton select-skel-block${i ? " " + i : ""}`,
+		style: n ? {
+			aspectRatio: n,
+			width: r
+		} : {
+			height: t,
+			width: r
+		},
+		"aria-hidden": "true"
 	});
 }
 function o({ tall: n = !1 }) {
@@ -40,7 +54,19 @@ function s({ media: n = !0, action: r = !0, boxed: i = !1 }) {
 		]
 	});
 }
-var c = Object.assign(function({ lines: t }) {
+function c({ columns: t = 4, rows: n = 4 }) {
+	let r = Math.max(1, Math.floor(t)), i = { gridTemplateColumns: r === 1 ? "minmax(0, 1fr)" : `minmax(0, 2fr) repeat(${r - 1}, minmax(0, 1fr))` };
+	return /* @__PURE__ */ e("div", {
+		className: "select-skel-table",
+		"aria-hidden": "true",
+		children: Array.from({ length: Math.max(1, Math.floor(n)) }, (t, n) => /* @__PURE__ */ e("div", {
+			className: "select-skel-table__row",
+			style: i,
+			children: Array.from({ length: r }, (t, n) => /* @__PURE__ */ e("div", { className: "select-skeleton select-skel-table__cell" }, n))
+		}, n))
+	});
+}
+var l = Object.assign(function({ lines: t }) {
 	return /* @__PURE__ */ e(n, { lines: t });
 }, {
 	Body: n,
@@ -48,9 +74,10 @@ var c = Object.assign(function({ lines: t }) {
 	Thumbnail: i,
 	Block: a,
 	Field: o,
-	Row: s
+	Row: s,
+	Table: c
 });
 //#endregion
-export { c as SelectSkeleton };
+export { l as SelectSkeleton };
 
 //# sourceMappingURL=SelectSkeleton.js.map

package/dist/SelectTable.d.ts

@@ -117,8 +117,10 @@ type SelectTableEmptyOwnProps = {
     icon?: ReactNode;
     title: ReactNode;
     subtitle?: ReactNode;
-    /** Optional CTA below the text (e.g. "Enable Billing") — for standalone empty cards. */
+    /** Optional CTA below the text (e.g. "Enable Billing") — for standalone empty cards. Várias ações ficam lado a lado. */
     action?: ReactNode;
+    /** 0.1.207: o vazio que é um ERRO (a lista não carregou): o ícone no tom crítico. O `role="alert"` é de quem usa. */
+    tone?: 'critical';
 };
 export type SelectTableEmptyProps = SelectTableEmptyOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableEmptyOwnProps>;
 export declare const SelectTableEmpty: import('react').ForwardRefExoticComponent<SelectTableEmptyOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectTableEmptyOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectTable.js

@@ -212,11 +212,11 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
 			children: r !== "none" && /* @__PURE__ */ g(t, {})
 		}) : null, e]
 	});
-}), k = l(function({ icon: e, title: t, subtitle: n, action: r, className: i, ...a }, o) {
+}), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i, className: a, ...o }, s) {
 	return /* @__PURE__ */ _("div", {
-		ref: o,
-		...a,
-		className: `select-table-empty${i ? " " + i : ""}`,
+		ref: s,
+		...o,
+		className: `select-table-empty${i === "critical" ? " select-table-empty--critical" : ""}${a ? " " + a : ""}`,
 		children: [
 			e && /* @__PURE__ */ g("span", {
 				className: "select-table-empty__icon",

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