@selectwin/kit 0.1.219 → 0.1.221

package/dist/SelectCarousel.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface SelectCarouselSlide {
+    key: string;
+    /** O título do slide ("Entrega no período"): o cabeçalho dele e o nome do ponto que leva até ele. */
+    title: string;
+    /** A análise em uma frase. */
+    text: ReactNode;
+    /** Para onde a seta leva: um endereço do app (o `<Link>` do roteador). */
+    to?: string;
+    /** Ou um endereço de fora. */
+    href?: string;
+}
+type SelectCarouselOwnProps = {
+    slides: readonly SelectCarouselSlide[];
+    /** O nome do carrossel ("Análises do período"); padrão: "Destaques". */
+    label?: string;
+    /** De quanto em quanto tempo passa sozinho, em ms (padrão 7000). */
+    interval?: number;
+};
+export type SelectCarouselProps = SelectCarouselOwnProps & Omit<ComponentPropsWithoutRef<'section'>, keyof SelectCarouselOwnProps>;
+export declare function SelectCarousel({ slides, label, interval, className, ...rest }: SelectCarouselProps): import("react").JSX.Element | null;
+export {};

package/dist/SelectCarousel.js

@@ -0,0 +1,133 @@
+/* empty css           */
+import { safeHref as e } from "./internal/safeHref.js";
+import { ArrowUpRightIcon as t, ChevronLeftIcon as n, ChevronRightIcon as r, PauseIcon as i, PlayIcon as a } from "./icons.js";
+import { formatSelectNumber as o, useSelectLocale as s, useSelectMessages as c } from "./SelectLocale.js";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Link as m } from "react-router-dom";
+//#region src/SelectCarousel.tsx
+var h = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function g({ slides: g, label: _, interval: v = 7e3, className: y, ...b }) {
+	let x = c().carousel, S = s(), C = g.length, [w, T] = d(0), [E, D] = d(!1), [O, k] = d(() => !h()), [A, j] = d(!1), M = u(null), N = Math.min(w, Math.max(0, C - 1)), P = O && !A && C > 1;
+	l(() => {
+		if (!P) return;
+		let e = window.setTimeout(() => {
+			D(!1), T((e) => (e + 1) % C);
+		}, v);
+		return () => window.clearTimeout(e);
+	}, [
+		P,
+		C,
+		w,
+		v
+	]);
+	let F = (e) => {
+		D(e < N), T((e % C + C) % C);
+	}, I = g[N];
+	if (!I) return null;
+	let L = e(I.to ?? I.href), R = L === void 0 ? null : I.to == null ? /* @__PURE__ */ f("a", {
+		href: L,
+		className: "select-carousel__go",
+		"aria-label": x.open(I.title),
+		children: /* @__PURE__ */ f(t, {})
+	}) : /* @__PURE__ */ f(m, {
+		to: L,
+		className: "select-carousel__go",
+		"aria-label": x.open(I.title),
+		children: /* @__PURE__ */ f(t, {})
+	});
+	return /* @__PURE__ */ p("section", {
+		...b,
+		className: `select-carousel${y ? " " + y : ""}`,
+		"aria-roledescription": x.carousel,
+		"aria-label": _ ?? x.label,
+		onMouseEnter: () => j(!0),
+		onMouseLeave: () => j(!1),
+		onFocus: () => j(!0),
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || j(!1);
+		},
+		onKeyDown: (e) => {
+			C < 2 || e.key !== "ArrowRight" && e.key !== "ArrowLeft" || (e.preventDefault(), F(N + (e.key === "ArrowRight" ? 1 : -1)));
+		},
+		onPointerDown: (e) => {
+			e.pointerType !== "mouse" && (M.current = e.clientX);
+		},
+		onPointerUp: (e) => {
+			if (M.current === null) return;
+			let t = e.clientX - M.current;
+			M.current = null, C > 1 && Math.abs(t) > 40 && F(N + (t < 0 ? 1 : -1));
+		},
+		children: [
+			/* @__PURE__ */ f("span", {
+				className: "select-carousel__layer",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "select-carousel__layer select-carousel__layer--2",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "select-carousel__card",
+				children: [/* @__PURE__ */ f("div", {
+					className: "select-carousel__slides",
+					"aria-live": P ? "off" : "polite",
+					children: /* @__PURE__ */ p("div", {
+						className: `select-carousel__slide${E ? " is-back" : ""}`,
+						role: "group",
+						"aria-roledescription": x.slide,
+						"aria-label": x.position(o(N + 1, S), o(C, S)),
+						children: [/* @__PURE__ */ p("span", {
+							className: "select-carousel__head",
+							children: [/* @__PURE__ */ f("span", { children: I.title }), R]
+						}), /* @__PURE__ */ f("span", {
+							className: "select-carousel__text",
+							children: I.text
+						})]
+					}, I.key)
+				}), C > 1 && /* @__PURE__ */ p("div", {
+					className: "select-carousel__nav",
+					children: [/* @__PURE__ */ f("span", {
+						className: "select-carousel__dots",
+						children: g.map((e, t) => /* @__PURE__ */ f("button", {
+							type: "button",
+							className: "select-carousel__dot",
+							"aria-label": `${o(t + 1, S)}: ${e.title}`,
+							"aria-current": t === N ? "true" : void 0,
+							onClick: () => F(t)
+						}, e.key))
+					}), /* @__PURE__ */ p("span", {
+						className: "select-carousel__ctrl",
+						children: [
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								className: "select-carousel__btn",
+								"aria-label": x.previous,
+								onClick: () => F(N - 1),
+								children: /* @__PURE__ */ f(n, {})
+							}),
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								className: "select-carousel__btn",
+								"aria-label": O ? x.pause : x.play,
+								onClick: () => k((e) => !e),
+								children: f(O ? i : a, {})
+							}),
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								className: "select-carousel__btn",
+								"aria-label": x.next,
+								onClick: () => F(N + 1),
+								children: /* @__PURE__ */ f(r, {})
+							})
+						]
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { g as SelectCarousel };
+
+//# sourceMappingURL=SelectCarousel.js.map

package/dist/SelectConversation.d.ts

@@ -34,5 +34,19 @@ export interface SelectConversationBubbleProps {
     avatar?: ReactNode;
     /** 0.1.184: a hora ao lado do nome, em cima do balão ("Você · 26/10, 08:46"). */
     time?: ReactNode;
+    /** 0.1.221: a mídia dentro do balão, acima do texto (a legenda): o `SelectConversationMedia`. */
+    media?: ReactNode;
 }
-export declare function SelectConversationBubble({ direction, author, label, attachment, meta, metaTone, children, avatar, time }: SelectConversationBubbleProps): import("react").JSX.Element;
+export declare function SelectConversationBubble({ direction, author, label, attachment, meta, metaTone, children, avatar, time, media }: SelectConversationBubbleProps): import("react").JSX.Element;
+/**
+ * 0.1.221: a mídia de uma mensagem, dentro do balão — a foto, a figurinha (sem fundo, menor), o vídeo e o áudio (com os
+ * controles do navegador). Nada é baixado antes de aparecer (`loading="lazy"`, `preload="none"`). Quando o arquivo não
+ * abre (o link da mídia expirou), `onError` avisa quem usa, que troca pela nota.
+ */
+export declare function SelectConversationMedia({ kind, src, alt, onError, }: {
+    kind: 'image' | 'sticker' | 'video' | 'audio';
+    src: string;
+    /** O que a imagem mostra (a legenda, ou "Imagem"). */
+    alt?: string;
+    onError?: () => void;
+}): import("react").JSX.Element;

package/dist/SelectConversation.js

@@ -22,7 +22,14 @@ function l({ children: r, "aria-label": a }) {
 		if (!l.current) return;
 		let e = c(o.current);
 		e && (e.scrollTop = e.scrollHeight);
-	}), /* @__PURE__ */ i("div", {
+	}), e(() => {
+		let e = o.current, t = c(e);
+		if (!e || !t || typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(() => {
+			l.current && (t.scrollTop = t.scrollHeight);
+		});
+		return n.observe(e), () => n.disconnect();
+	}, []), /* @__PURE__ */ i("div", {
 		ref: o,
 		className: "select-convo",
 		role: "log",
@@ -48,8 +55,8 @@ function d({ children: e, time: t }) {
 		}) : null]
 	});
 }
-function f({ direction: e, author: t, label: n, attachment: s, meta: c, metaTone: l, children: u, avatar: d, time: f }) {
-	let p = u != null && u !== "", m = /* @__PURE__ */ a(r, { children: [
+function f({ direction: e, author: t, label: n, attachment: s, meta: c, metaTone: l, children: u, avatar: d, time: f, media: p }) {
+	let m = u != null && u !== "", h = /* @__PURE__ */ a(r, { children: [
 		t || f ? /* @__PURE__ */ a("span", {
 			className: "select-convo__author",
 			children: [t, f ? /* @__PURE__ */ i("span", {
@@ -57,15 +64,22 @@ function f({ direction: e, author: t, label: n, attachment: s, meta: c, metaTone
 				children: f
 			}) : null]
 		}) : null,
-		p || n ? /* @__PURE__ */ a("div", {
+		m || n || p != null ? /* @__PURE__ */ a("div", {
 			className: "select-convo__bubble",
-			children: [n ? /* @__PURE__ */ i("span", {
-				className: "select-convo__label",
-				children: n
-			}) : null, p ? /* @__PURE__ */ i("div", {
-				className: "select-convo__text",
-				children: u
-			}) : null]
+			children: [
+				n ? /* @__PURE__ */ i("span", {
+					className: "select-convo__label",
+					children: n
+				}) : null,
+				p == null ? null : /* @__PURE__ */ i("div", {
+					className: "select-convo__media",
+					children: p
+				}),
+				m ? /* @__PURE__ */ i("div", {
+					className: "select-convo__text",
+					children: u
+				}) : null
+			]
 		}) : null,
 		s ? /* @__PURE__ */ i("div", {
 			className: "select-convo__attachment",
@@ -84,14 +98,35 @@ function f({ direction: e, author: t, label: n, attachment: s, meta: c, metaTone
 			children: d
 		}), /* @__PURE__ */ i("div", {
 			className: "select-convo__stack",
-			children: m
+			children: h
 		})]
 	}) : /* @__PURE__ */ i("div", {
 		className: o("select-convo__msg", `select-convo__msg--${e}`),
-		children: m
+		children: h
+	});
+}
+function p({ kind: e, src: t, alt: n, onError: r }) {
+	return e === "audio" ? /* @__PURE__ */ i("audio", {
+		className: "select-convo__audio",
+		controls: !0,
+		preload: "none",
+		src: t,
+		onError: r
+	}) : e === "video" ? /* @__PURE__ */ i("video", {
+		className: "select-convo__video",
+		controls: !0,
+		preload: "none",
+		src: t,
+		onError: r
+	}) : /* @__PURE__ */ i("img", {
+		className: `select-convo__image${e === "sticker" ? " select-convo__image--sticker" : ""}`,
+		src: t,
+		alt: n ?? "",
+		loading: "lazy",
+		onError: r
 	});
 }
 //#endregion
-export { l as SelectConversation, f as SelectConversationBubble, u as SelectConversationDay, d as SelectConversationEvent };
+export { l as SelectConversation, f as SelectConversationBubble, u as SelectConversationDay, d as SelectConversationEvent, p as SelectConversationMedia };
 
 //# sourceMappingURL=SelectConversation.js.map

package/dist/SelectLocale.d.ts

@@ -84,6 +84,42 @@ export interface SelectKitMessages {
     sideNav: {
         pending: (hint: string) => string;
     };
+    /** 0.1.221: a caixa de entrada (SelectInbox, a lista, o leitor, o compositor e o anexo), que só falava português. */
+    inbox: {
+        list: string;
+        reader: string;
+        aside: string;
+        unread: string;
+        unreadCount: (n: number) => string;
+        messages: (n: number) => string;
+        flagged: string;
+        attachments: (n: number) => string;
+        back: string;
+        tools: string;
+        close: string;
+        drop: string;
+        open: string;
+        minimize: string;
+        message: string;
+        attachmentLoading: string;
+        attachmentReady: string;
+        attachmentFailed: string;
+        attachmentOpen: (name: string) => string;
+        attachmentBusy: (name: string) => string;
+        attachmentGet: (name: string) => string;
+    };
+    /** 0.1.220: o SelectCarousel — o nome, o papel, a posição e os botões. */
+    carousel: {
+        label: string;
+        carousel: string;
+        slide: string;
+        position: (at: string, count: string) => string;
+        previous: string;
+        next: string;
+        pause: string;
+        play: string;
+        open: (title: string) => string;
+    };
     /** 0.1.201: o SelectFeeBreakdown — os rótulos de sempre e a legenda da barra. */
     fees: {
         gross: string;

package/dist/SelectLocale.js

@@ -87,6 +87,40 @@ var r = {
 			progress: (e, t) => `${e} de ${t}`
 		},
 		sideNav: { pending: (e) => `${e} (com pendências)` },
+		inbox: {
+			list: "Conversas",
+			reader: "Conversa aberta",
+			aside: "Sobre a conversa",
+			unread: "Não lida",
+			unreadCount: (e) => e === 1 ? "1 não lida" : `${e} não lidas`,
+			messages: (e) => `${e} mensagens`,
+			flagged: "Com estrela",
+			attachments: (e) => e === 1 ? "1 anexo" : `${e} anexos`,
+			back: "Voltar para a lista",
+			tools: "Organizar a conversa",
+			close: "Fechar e descartar",
+			drop: "Solte para anexar",
+			open: "Abrir a janela",
+			minimize: "Minimizar",
+			message: "Mensagem",
+			attachmentLoading: "Gerando o link…",
+			attachmentReady: "Abrir",
+			attachmentFailed: "Não deu para pegar · tentar de novo",
+			attachmentOpen: (e) => `Abrir ${e} em outra aba`,
+			attachmentBusy: (e) => `${e}: gerando o link`,
+			attachmentGet: (e) => `Pegar o anexo ${e}`
+		},
+		carousel: {
+			label: "Destaques",
+			carousel: "carrossel",
+			slide: "slide",
+			position: (e, t) => `${e} de ${t}`,
+			previous: "Anterior",
+			next: "Próximo",
+			pause: "Parar de passar sozinho",
+			play: "Passar sozinho",
+			open: (e) => `Ver: ${e}`
+		},
 		fees: {
 			gross: "Valor bruto",
 			net: "Valor líquido",
@@ -180,6 +214,40 @@ var r = {
 			progress: (e, t) => `${e} of ${t}`
 		},
 		sideNav: { pending: (e) => `${e} (pending)` },
+		inbox: {
+			list: "Conversations",
+			reader: "Open conversation",
+			aside: "About the conversation",
+			unread: "Unread",
+			unreadCount: (e) => e === 1 ? "1 unread" : `${e} unread`,
+			messages: (e) => `${e} messages`,
+			flagged: "Starred",
+			attachments: (e) => e === 1 ? "1 attachment" : `${e} attachments`,
+			back: "Back to the list",
+			tools: "Organize the conversation",
+			close: "Close and discard",
+			drop: "Drop to attach",
+			open: "Open the window",
+			minimize: "Minimize",
+			message: "Message",
+			attachmentLoading: "Getting the link…",
+			attachmentReady: "Open",
+			attachmentFailed: "Couldn't get it · try again",
+			attachmentOpen: (e) => `Open ${e} in a new tab`,
+			attachmentBusy: (e) => `${e}: getting the link`,
+			attachmentGet: (e) => `Get the attachment ${e}`
+		},
+		carousel: {
+			label: "Highlights",
+			carousel: "carousel",
+			slide: "slide",
+			position: (e, t) => `${e} of ${t}`,
+			previous: "Previous",
+			next: "Next",
+			pause: "Stop rotating",
+			play: "Rotate automatically",
+			open: (e) => `Open: ${e}`
+		},
 		fees: {
 			gross: "Gross amount",
 			net: "Net amount",

package/dist/SelectMail.d.ts

@@ -24,10 +24,18 @@ export interface SelectInboxProps {
     aside?: ReactNode;
     /** O nome da coluna lateral para o leitor de tela. */
     asideLabel?: string;
+    /** 0.1.221: os nomes da lista e do leitor para o leitor de tela (padrão: "Conversas", "Conversa aberta"). */
+    listLabel?: string;
+    readerLabel?: string;
+    /**
+     * 0.1.221: a caixa DENTRO de uma página (o WhatsApp da SWMX, abaixo do cabeçalho), e não na tela inteira: a borda e o
+     * canto do cartão. A altura continua sendo a de quem a contém.
+     */
+    framed?: boolean;
     'aria-label'?: string;
 }
 /** A caixa de entrada em tela cheia: preenche a altura do pai e cada coluna rola por dentro. */
-export declare function SelectInbox({ toolbar, banner, list, reader, readerOpen, children, fullBody, aside, asideLabel, 'aria-label': ariaLabel }: SelectInboxProps): import("react").JSX.Element;
+export declare function SelectInbox({ toolbar, banner, list, reader, readerOpen, children, fullBody, aside, asideLabel, listLabel, readerLabel, framed, 'aria-label': ariaLabel, }: SelectInboxProps): import("react").JSX.Element;
 /** A faixa de aviso sob a barra, de ponta a ponta (ex.: "a senha da sua caixa deixou de valer"). */
 export declare function SelectInboxBanner({ tone, children, action }: {
     tone?: 'warning' | 'critical' | 'info';
@@ -35,7 +43,8 @@ export declare function SelectInboxBanner({ tone, children, action }: {
     action?: ReactNode;
 }): import("react").JSX.Element;
 export interface SelectInboxToolbarProps {
-    title: ReactNode;
+    /** O título da caixa (o h1 da tela cheia). 0.1.221: opcional — numa página, o título é o do cabeçalho dela. */
+    title?: ReactNode;
     /** Sob o título: a caixa e a sincronia (`SelectMailboxStatus`). */
     status?: ReactNode;
     /** As pastas e a busca. */
@@ -90,9 +99,14 @@ export interface SelectMailListItemProps {
     unread?: boolean;
     /** 0.1.161: alguma mensagem da conversa tem estrela — a estrela cheia ao lado da hora. */
     flagged?: boolean;
+    /**
+     * 0.1.221: quantas mensagens não lidas (o WhatsApp conta, o e-mail não): o número no lugar do ponto, e a linha em
+     * destaque como a `unread`.
+     */
+    unreadCount?: number;
     onClick: () => void;
 }
-export declare function SelectMailListItem({ from, avatar, subject, snippet, date, count, attachments, active, unread, flagged, onClick }: SelectMailListItemProps): import("react").JSX.Element;
+export declare function SelectMailListItem({ from, avatar, subject, snippet, date, count, attachments, active, unread: unreadProp, flagged, unreadCount, onClick, }: SelectMailListItemProps): import("react").JSX.Element;
 /** As linhas fantasmas enquanto a caixa chega. */
 export declare function SelectMailListSkeleton({ rows }: {
     rows?: number;
@@ -226,13 +240,19 @@ export declare function SelectMailComposerInput({ value, onChange, placeholder,
     maxLength?: number;
 }): import("react").JSX.Element;
 /** O corpo: texto, sem moldura, que cresce até um teto e rola. */
-export declare function SelectMailComposerBody({ value, onChange, placeholder, rows, 'aria-label': ariaLabel, maxLength, }: {
+export declare function SelectMailComposerBody({ value, onChange, placeholder, rows, 'aria-label': ariaLabel, maxLength, onEnter, id, }: {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
     rows?: number;
     'aria-label'?: string;
     maxLength?: number;
+    /**
+     * 0.1.221: o Enter envia (a conversa de mensagens curtas, o WhatsApp) e o Shift+Enter quebra a linha. Durante a
+     * composição de um acento ou de um ideograma, o Enter é da composição.
+     */
+    onEnter?: () => void;
+    id?: string;
 }): import("react").JSX.Element;
 /** O clipe do rodapé (0.1.149): abre o seletor de arquivos do sistema. Escolher o mesmo arquivo de novo também vale. */
 export declare function SelectMailAttachButton({ onFiles, accept, multiple, disabled, label, }: {