@lucasbernardosn/react-ui 0.2.0 → 0.3.0

package/dist/components/feedback/toast/toast-outlet.js

@@ -0,0 +1,108 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Button } from "../../buttons/button/button.js";
+import { CloseButton } from "../../buttons/close-button/close-button.js";
+import { ToastAction } from "./toast-action.js";
+import { ToastClose } from "./toast-close.js";
+import { ToastContent } from "./toast-content.js";
+import { ToastDescription } from "./toast-description.js";
+import { useToastRootContext } from "./use-toast-root-context.js";
+import { ToastIndicator } from "./toast-indicator.js";
+import { queuedToastManager } from "./toast-manager.js";
+import { ToastPortal } from "./toast-portal.js";
+import { ToastProvider } from "./toast-provider.js";
+import { ToastRoot } from "./toast-root.js";
+import { ToastTitle } from "./toast-title.js";
+import { ToastViewport } from "./toast-viewport.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-outlet.tsx
+/**
+* Onde aparecem os toasts abertos por `Toast.add` e `Toast.promise`. Monte um só, perto da raiz
+* do app, abaixo dos providers globais (tema, tradução): os toasts só enxergam os providers acima
+* dele, não os de quem os abriu.
+*
+* Um toast aberto antes de o `Outlet` montar espera por ele. O `limit` (3, por padrão) é quantos
+* ficam visíveis; os mais antigos além dele somem até os da frente saírem. O `timeout` (5000ms,
+* por padrão) vale para o toast que não traz o próprio, e `0` deixa o toast aberto.
+*
+* @example
+* ```tsx
+* <ThemeProvider>
+*   <App />
+*   <Toast.Outlet position="top-center" />
+* </ThemeProvider>
+* ```
+*/
+const ToastOutlet = (props) => {
+	const { position, limit, timeout } = props;
+	return /* @__PURE__ */ jsx(ToastProvider, {
+		toastManager: queuedToastManager,
+		limit,
+		timeout,
+		children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(ToastViewport, {
+			position,
+			children: /* @__PURE__ */ jsx(OutletToasts, {})
+		}) })
+	});
+};
+ToastOutlet.displayName = "Toast.Outlet";
+const OutletToasts = () => {
+	const { toasts } = Toast.useToastManager();
+	return toasts.map((toast) => /* @__PURE__ */ jsx(OutletToast, { toast }, toast.id));
+};
+/**
+* O desenho de um toast do `Outlet`: indicador, título e descrição empilhados, com a ação abaixo
+* deles, e o X no canto. O X sobe 2px para caber na linha do título sem empurrar o conteúdo.
+*/
+const OutletToast = (props) => {
+	const { toast } = props;
+	return /* @__PURE__ */ jsx(ToastRoot, {
+		toast,
+		children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+			/* @__PURE__ */ jsx(ToastIndicator, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: mergeTwClassNames([
+					"flex",
+					"flex-1",
+					"flex-col",
+					"gap-0.5",
+					"min-w-0"
+				]),
+				children: [
+					/* @__PURE__ */ jsx(ToastTitle, {}),
+					/* @__PURE__ */ jsx(ToastDescription, {}),
+					/* @__PURE__ */ jsx(ToastAction, { render: /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "outline",
+						className: mergeTwClassNames(["mt-1.5", "self-start"])
+					}) })
+				]
+			}),
+			/* @__PURE__ */ jsx(OutletClose, {})
+		] })
+	});
+};
+/**
+* O X na cor do tipo do toast, para acompanhar a superfície: o `ghost` do botão pinta o ícone no
+* passo 11 da cor e o hover no passo 4. Sem tipo colorido, fica gray.
+*/
+const OutletClose = () => {
+	const { type } = useToastRootContext();
+	return /* @__PURE__ */ jsx(ToastClose, { render: /* @__PURE__ */ jsx(CloseButton, {
+		size: "2xs",
+		colorScheme: closeColorSchemes[type],
+		className: mergeTwClassNames(["-my-0.5"])
+	}) });
+};
+const closeColorSchemes = {
+	neutral: "gray",
+	loading: "gray",
+	info: "blue",
+	success: "green",
+	warning: "amber",
+	error: "red"
+};
+//#endregion
+export { ToastOutlet };
+
+//# sourceMappingURL=toast-outlet.js.map

package/dist/components/feedback/toast/toast-outlet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-outlet.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-outlet.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport type React from 'react';\nimport { Button } from '#components/buttons/button';\nimport {\n  CloseButton,\n  type CloseButtonProps,\n} from '#components/buttons/close-button';\nimport { mergeTwClassNames } from '#utils';\nimport { ToastAction } from './toast-action';\nimport { ToastClose } from './toast-close';\nimport { ToastContent } from './toast-content';\nimport { ToastDescription } from './toast-description';\nimport { ToastIndicator } from './toast-indicator';\nimport { queuedToastManager, type ToastType } from './toast-manager';\nimport { ToastPortal } from './toast-portal';\nimport { ToastProvider, type ToastProviderProps } from './toast-provider';\nimport { ToastRoot, type ToastRootToastObject } from './toast-root';\nimport { ToastTitle } from './toast-title';\nimport { ToastViewport } from './toast-viewport';\nimport type { ToastVariants } from './use-toast-context';\nimport { useToastRootContext } from './use-toast-root-context';\n\nexport type ToastOutletProps = ToastVariants &\n  Pick<ToastProviderProps, 'limit' | 'timeout'>;\n\n/**\n * Onde aparecem os toasts abertos por `Toast.add` e `Toast.promise`. Monte um só, perto da raiz\n * do app, abaixo dos providers globais (tema, tradução): os toasts só enxergam os providers acima\n * dele, não os de quem os abriu.\n *\n * Um toast aberto antes de o `Outlet` montar espera por ele. O `limit` (3, por padrão) é quantos\n * ficam visíveis; os mais antigos além dele somem até os da frente saírem. O `timeout` (5000ms,\n * por padrão) vale para o toast que não traz o próprio, e `0` deixa o toast aberto.\n *\n * @example\n * ```tsx\n * <ThemeProvider>\n *   <App />\n *   <Toast.Outlet position=\"top-center\" />\n * </ThemeProvider>\n * ```\n */\nexport const ToastOutlet = (props: ToastOutletProps): React.ReactNode => {\n  const { position, limit, timeout } = props;\n\n  return (\n    <ToastProvider\n      toastManager={queuedToastManager}\n      limit={limit}\n      timeout={timeout}\n    >\n      <ToastPortal>\n        <ToastViewport position={position}>\n          <OutletToasts />\n        </ToastViewport>\n      </ToastPortal>\n    </ToastProvider>\n  );\n};\n\nToastOutlet.displayName = 'Toast.Outlet';\n\nconst OutletToasts = () => {\n  const { toasts } = BaseToast.useToastManager();\n\n  return toasts.map((toast) => (\n    <OutletToast\n      key={toast.id}\n      toast={toast}\n    />\n  ));\n};\n\ntype OutletToastProps = {\n  toast: ToastRootToastObject;\n};\n\n/**\n * O desenho de um toast do `Outlet`: indicador, título e descrição empilhados, com a ação abaixo\n * deles, e o X no canto. O X sobe 2px para caber na linha do título sem empurrar o conteúdo.\n */\nconst OutletToast = (props: OutletToastProps) => {\n  const { toast } = props;\n\n  return (\n    <ToastRoot toast={toast}>\n      <ToastContent>\n        <ToastIndicator />\n\n        <div\n          className={mergeTwClassNames([\n            'flex',\n            'flex-1',\n            'flex-col',\n            'gap-0.5',\n            'min-w-0',\n          ])}\n        >\n          <ToastTitle />\n          <ToastDescription />\n          <ToastAction\n            render={\n              <Button\n                size=\"xs\"\n                variant=\"outline\"\n                className={mergeTwClassNames(['mt-1.5', 'self-start'])}\n              />\n            }\n          />\n        </div>\n\n        <OutletClose />\n      </ToastContent>\n    </ToastRoot>\n  );\n};\n\n/**\n * O X na cor do tipo do toast, para acompanhar a superfície: o `ghost` do botão pinta o ícone no\n * passo 11 da cor e o hover no passo 4. Sem tipo colorido, fica gray.\n */\nconst OutletClose = () => {\n  const { type } = useToastRootContext();\n\n  return (\n    <ToastClose\n      render={\n        <CloseButton\n          size=\"2xs\"\n          colorScheme={closeColorSchemes[type]}\n          className={mergeTwClassNames(['-my-0.5'])}\n        />\n      }\n    />\n  );\n};\n\nconst closeColorSchemes: Record<ToastType, CloseButtonProps['colorScheme']> = {\n  neutral: 'gray',\n  loading: 'gray',\n  info: 'blue',\n  success: 'green',\n  warning: 'amber',\n  error: 'red',\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,eAAe,UAA6C;CACvE,MAAM,EAAE,UAAU,OAAO,YAAY;CAErC,OACE,oBAAC,eAAD;EACE,cAAc;EACP;EACE;EAET,UAAA,oBAAC,aAAD,EAAA,UACE,oBAAC,eAAD;GAAyB;GACvB,UAAA,oBAAC,cAAD,CAAe,CAAA;EACF,CAAA,EACJ,CAAA;CACA,CAAA;AAEnB;AAEA,YAAY,cAAc;AAE1B,MAAM,qBAAqB;CACzB,MAAM,EAAE,WAAWA,MAAU,gBAAgB;CAE7C,OAAO,OAAO,KAAK,UACjB,oBAAC,aAAD,EAES,MACR,GAFM,MAAM,EAEZ,CACF;AACH;;;;;AAUA,MAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,UAAU;CAElB,OACE,oBAAC,WAAD;EAAkB;EAChB,UAAA,qBAAC,cAAD,EAAA,UAAA;GACE,oBAAC,gBAAD,CAAiB,CAAA;GAEjB,qBAAC,OAAD;IACE,WAAW,kBAAkB;KAC3B;KACA;KACA;KACA;KACA;IACF,CAAC;IAPH,UAAA;KASE,oBAAC,YAAD,CAAa,CAAA;KACb,oBAAC,kBAAD,CAAmB,CAAA;KACnB,oBAAC,aAAD,EACE,QACE,oBAAC,QAAD;MACE,MAAK;MACL,SAAQ;MACR,WAAW,kBAAkB,CAAC,UAAU,YAAY,CAAC;KACtD,CAAA,EAEJ,CAAA;IACE;;GAEL,oBAAC,aAAD,CAAc,CAAA;EACF,EAAA,CAAA;CACL,CAAA;AAEf;;;;;AAMA,MAAM,oBAAoB;CACxB,MAAM,EAAE,SAAS,oBAAoB;CAErC,OACE,oBAAC,YAAD,EACE,QACE,oBAAC,aAAD;EACE,MAAK;EACL,aAAa,kBAAkB;EAC/B,WAAW,kBAAkB,CAAC,SAAS,CAAC;CACzC,CAAA,EAEJ,CAAA;AAEL;AAEA,MAAM,oBAAwE;CAC5E,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT"}

package/dist/components/feedback/toast/toast-placement.d.ts

@@ -0,0 +1,20 @@
+import { ToastVariants } from "./use-toast-context.js";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-placement.d.ts
+type ToastPlacement = {
+  /** Borda da tela de onde a pilha cresce. */
+  edge: 'top' | 'bottom';
+  /** Lado da fila a partir de `sm`. */
+  align: 'left' | 'center' | 'right';
+  /** Gestos que fecham o toast: de volta para a borda e para o lado onde a fila está. */
+  swipeDirection: NonNullable<Toast.Root.Props['swipeDirection']>;
+};
+/**
+ * As seis posições se reduzem a dois eixos independentes. A borda vira o sinal da pilha no
+ * `Toast.Viewport` e a origem do `Toast.Root`; o lado só prende a fila e escolhe o gesto
+ * horizontal. No centro, os dois lados fecham, porque nenhum deles é o caminho mais curto para
+ * fora da tela.
+ */
+export declare const toastPlacements: Record<Required<ToastVariants>['position'], ToastPlacement>;
+//#endregion
+//# sourceMappingURL=toast-placement.d.ts.map

package/dist/components/feedback/toast/toast-placement.js

@@ -0,0 +1,51 @@
+//#region src/components/feedback/toast/toast-placement.ts
+/**
+* As seis posições se reduzem a dois eixos independentes. A borda vira o sinal da pilha no
+* `Toast.Viewport` e a origem do `Toast.Root`; o lado só prende a fila e escolhe o gesto
+* horizontal. No centro, os dois lados fecham, porque nenhum deles é o caminho mais curto para
+* fora da tela.
+*/
+const toastPlacements = {
+	"top-left": {
+		edge: "top",
+		align: "left",
+		swipeDirection: ["up", "left"]
+	},
+	"top-center": {
+		edge: "top",
+		align: "center",
+		swipeDirection: [
+			"up",
+			"left",
+			"right"
+		]
+	},
+	"top-right": {
+		edge: "top",
+		align: "right",
+		swipeDirection: ["up", "right"]
+	},
+	"bottom-left": {
+		edge: "bottom",
+		align: "left",
+		swipeDirection: ["down", "left"]
+	},
+	"bottom-center": {
+		edge: "bottom",
+		align: "center",
+		swipeDirection: [
+			"down",
+			"left",
+			"right"
+		]
+	},
+	"bottom-right": {
+		edge: "bottom",
+		align: "right",
+		swipeDirection: ["down", "right"]
+	}
+};
+//#endregion
+export { toastPlacements };
+
+//# sourceMappingURL=toast-placement.js.map

package/dist/components/feedback/toast/toast-placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-placement.js","names":[],"sources":["../../../../src/components/feedback/toast/toast-placement.ts"],"sourcesContent":["import type { Toast as BaseToast } from '@base-ui/react/toast';\nimport type { ToastVariants } from './use-toast-context';\n\ntype ToastPlacement = {\n  /** Borda da tela de onde a pilha cresce. */\n  edge: 'top' | 'bottom';\n  /** Lado da fila a partir de `sm`. */\n  align: 'left' | 'center' | 'right';\n  /** Gestos que fecham o toast: de volta para a borda e para o lado onde a fila está. */\n  swipeDirection: NonNullable<BaseToast.Root.Props['swipeDirection']>;\n};\n\n/**\n * As seis posições se reduzem a dois eixos independentes. A borda vira o sinal da pilha no\n * `Toast.Viewport` e a origem do `Toast.Root`; o lado só prende a fila e escolhe o gesto\n * horizontal. No centro, os dois lados fecham, porque nenhum deles é o caminho mais curto para\n * fora da tela.\n */\nexport const toastPlacements: Record<\n  Required<ToastVariants>['position'],\n  ToastPlacement\n> = {\n  'top-left': { edge: 'top', align: 'left', swipeDirection: ['up', 'left'] },\n  'top-center': {\n    edge: 'top',\n    align: 'center',\n    swipeDirection: ['up', 'left', 'right'],\n  },\n  'top-right': { edge: 'top', align: 'right', swipeDirection: ['up', 'right'] },\n  'bottom-left': {\n    edge: 'bottom',\n    align: 'left',\n    swipeDirection: ['down', 'left'],\n  },\n  'bottom-center': {\n    edge: 'bottom',\n    align: 'center',\n    swipeDirection: ['down', 'left', 'right'],\n  },\n  'bottom-right': {\n    edge: 'bottom',\n    align: 'right',\n    swipeDirection: ['down', 'right'],\n  },\n};\n"],"mappings":";;;;;;;AAkBA,MAAa,kBAGT;CACF,YAAY;EAAE,MAAM;EAAO,OAAO;EAAQ,gBAAgB,CAAC,MAAM,MAAM;CAAE;CACzE,cAAc;EACZ,MAAM;EACN,OAAO;EACP,gBAAgB;GAAC;GAAM;GAAQ;EAAO;CACxC;CACA,aAAa;EAAE,MAAM;EAAO,OAAO;EAAS,gBAAgB,CAAC,MAAM,OAAO;CAAE;CAC5E,eAAe;EACb,MAAM;EACN,OAAO;EACP,gBAAgB,CAAC,QAAQ,MAAM;CACjC;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,gBAAgB;GAAC;GAAQ;GAAQ;EAAO;CAC1C;CACA,gBAAgB;EACd,MAAM;EACN,OAAO;EACP,gBAAgB,CAAC,QAAQ,OAAO;CAClC;AACF"}

package/dist/components/feedback/toast/toast-portal.d.ts

@@ -0,0 +1,13 @@
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-portal.d.ts
+export type ToastPortalProps = Toast.Portal.Props;
+export type ToastPortalState = Toast.Portal.State;
+/**
+ * Leva a fila para o fim do `body`, fora do contexto de empilhamento do app.
+ */
+export declare const ToastPortal: {
+  (props: ToastPortalProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=toast-portal.d.ts.map

package/dist/components/feedback/toast/toast-portal.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-portal.tsx
+/**
+* Leva a fila para o fim do `body`, fora do contexto de empilhamento do app.
+*/
+const ToastPortal = (props) => {
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-component": "Toast.Portal",
+		...props
+	});
+};
+ToastPortal.displayName = "Toast.Portal";
+//#endregion
+export { ToastPortal };
+
+//# sourceMappingURL=toast-portal.js.map

package/dist/components/feedback/toast/toast-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-portal.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-portal.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\n\nexport type ToastPortalProps = BaseToast.Portal.Props;\n\nexport type ToastPortalState = BaseToast.Portal.State;\n\n/**\n * Leva a fila para o fim do `body`, fora do contexto de empilhamento do app.\n */\nexport const ToastPortal = (props: ToastPortalProps) => {\n  return (\n    <BaseToast.Portal\n      data-component=\"Toast.Portal\"\n      {...props}\n    />\n  );\n};\n\nToastPortal.displayName = 'Toast.Portal';\n"],"mappings":";;;;;;AASA,MAAa,eAAe,UAA4B;CACtD,OACE,oBAACA,MAAU,QAAX;EACE,kBAAe;EACf,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/feedback/toast/toast-provider.d.ts

@@ -0,0 +1,15 @@
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-provider.d.ts
+export type ToastProviderProps = Toast.Provider.Props;
+/**
+ * Guarda a fila de toasts, o `limit` e o `timeout` padrão. Não renderiza elemento.
+ *
+ * Só é preciso para montar uma fila própria com as partes, lida pelo `Toast.useManager`. A fila do
+ * `Toast.add` já vem montada no `Toast.Outlet`.
+ */
+export declare const ToastProvider: {
+  (props: ToastProviderProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=toast-provider.d.ts.map

package/dist/components/feedback/toast/toast-provider.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-provider.tsx
+/**
+* Guarda a fila de toasts, o `limit` e o `timeout` padrão. Não renderiza elemento.
+*
+* Só é preciso para montar uma fila própria com as partes, lida pelo `Toast.useManager`. A fila do
+* `Toast.add` já vem montada no `Toast.Outlet`.
+*/
+const ToastProvider = (props) => {
+	return /* @__PURE__ */ jsx(Toast.Provider, { ...props });
+};
+ToastProvider.displayName = "Toast.Provider";
+//#endregion
+export { ToastProvider };
+
+//# sourceMappingURL=toast-provider.js.map

package/dist/components/feedback/toast/toast-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-provider.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-provider.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\n\nexport type ToastProviderProps = BaseToast.Provider.Props;\n\n/**\n * Guarda a fila de toasts, o `limit` e o `timeout` padrão. Não renderiza elemento.\n *\n * Só é preciso para montar uma fila própria com as partes, lida pelo `Toast.useManager`. A fila do\n * `Toast.add` já vem montada no `Toast.Outlet`.\n */\nexport const ToastProvider = (props: ToastProviderProps) => {\n  return <BaseToast.Provider {...props} />;\n};\n\nToastProvider.displayName = 'Toast.Provider';\n"],"mappings":";;;;;;;;;AAUA,MAAa,iBAAiB,UAA8B;CAC1D,OAAO,oBAACA,MAAU,UAAX,EAAoB,GAAI,MAAQ,CAAA;AACzC;AAEA,cAAc,cAAc"}

package/dist/components/feedback/toast/toast-root-variants.d.ts

@@ -0,0 +1,47 @@
+//#region src/components/feedback/toast/toast-root-variants.d.ts
+/**
+ * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra
+ * e cor do texto estão explicados (tabela no README de `overlays`). As diferenças:
+ * - posição e animação próprias, da pilha, abaixo;
+ * - `shadow-lg`, como o Dialog, e anel de foco: o toast entra no Tab;
+ * - o `type` colore a superfície, como o `status` do Alert: declara `--toast-bg` (passo 3, opaco,
+ *   para os toasts de trás não aparecerem através dele), `--toast-border` (passo 7) e, nos tipos
+ *   com cor, `--toast-fg` (passo 12), que o `Toast.Title` e o `Toast.Description` leem. O
+ *   `neutral` e o `loading` ficam na superfície neutra, com o texto em gray;
+ * - sem `--popover-padding`: o respiro fica no `Toast.Content`.
+ *
+ * **Pilha.** O Base UI escreve no toast o índice (`--toast-index`, 0 na frente), a soma das alturas
+ * dos que estão à frente (`--toast-offset-y`), a altura dele (`--toast-height`) e o arrasto
+ * (`--toast-swipe-movement-*`); o viewport escreve a altura do da frente
+ * (`--toast-frontmost-height`). Todos positivos, contados a partir da borda: o
+ * `--toast-stack-sign` do `Toast.Viewport` dá o sentido. Recolhida, a pilha deixa cada toast de
+ * trás aparecer 12px além do da frente, encolhido em 5% por nível e com a altura do da frente,
+ * com o conteúdo apagado pelo `Toast.Content`; expandida, cada um fica na própria altura, 12px
+ * depois do anterior. Entre os dois estados só muda `--toast-y` e `--toast-scale`.
+ *
+ * Antes da primeira medição, o toast que entra não tem `--toast-height`, nem o viewport
+ * `--toast-frontmost-height`. Por isso a altura recolhida entra no `--toast-y` com reserva de
+ * `0px`: uma variável inválida invalida o `transform` inteiro, que vira `none`, e a entrada perde o
+ * deslize, ficando só a opacidade.
+ *
+ * **`transform` em vez de `translate-*` e `scale-*`.** Durante o arrasto, o Base UI escreve um
+ * `transform` inline (`translateX() translateY() scale()`) para prender o toast ao dedo. As
+ * propriedades `translate` e `scale`, que as utilities do Tailwind escrevem, se somam ao
+ * `transform` em vez de serem trocadas por ele: o toast andaria o dobro. O `transform` daqui usa
+ * as mesmas funções, na mesma ordem: ao soltar, a transição parte do inline e só interpola função
+ * por função quando as listas batem. Com listas diferentes, o navegador interpola por matriz, e a
+ * saída pelo arrasto volta para o meio ou vai para o lado errado.
+ *
+ * **Entrada e saída.** O toast entra pela borda e sai por ela, ou para o lado do arrasto que o
+ * fechou, por `--toast-hidden-*`. Com movimento reduzido, só esmaece. A curva de entrada também
+ * serve à pilha que expande e recolhe: o elemento tem uma transição só fora da saída.
+ *
+ * O `::after` cobre o espaço até o toast seguinte, do lado da borda, para a pilha expandida não
+ * recolher quando o mouse passa entre dois toasts.
+ */
+export declare const toastRootVariants: (props?: ({
+  type?: "loading" | "neutral" | "info" | "success" | "warning" | "error" | null | undefined;
+  edge?: "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=toast-root-variants.d.ts.map

package/dist/components/feedback/toast/toast-root-variants.js

@@ -0,0 +1,142 @@
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/toast/toast-root-variants.ts
+/** O `type` declara estas variáveis, e o `toastRootVariants` as consome (explicado nele). */
+const neutralSurface = [
+	"[--toast-bg:var(--color-white)]",
+	"dark:[--toast-bg:var(--color-gray-2)]",
+	"[--toast-border:var(--color-gray-6)]"
+];
+/**
+* Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra
+* e cor do texto estão explicados (tabela no README de `overlays`). As diferenças:
+* - posição e animação próprias, da pilha, abaixo;
+* - `shadow-lg`, como o Dialog, e anel de foco: o toast entra no Tab;
+* - o `type` colore a superfície, como o `status` do Alert: declara `--toast-bg` (passo 3, opaco,
+*   para os toasts de trás não aparecerem através dele), `--toast-border` (passo 7) e, nos tipos
+*   com cor, `--toast-fg` (passo 12), que o `Toast.Title` e o `Toast.Description` leem. O
+*   `neutral` e o `loading` ficam na superfície neutra, com o texto em gray;
+* - sem `--popover-padding`: o respiro fica no `Toast.Content`.
+*
+* **Pilha.** O Base UI escreve no toast o índice (`--toast-index`, 0 na frente), a soma das alturas
+* dos que estão à frente (`--toast-offset-y`), a altura dele (`--toast-height`) e o arrasto
+* (`--toast-swipe-movement-*`); o viewport escreve a altura do da frente
+* (`--toast-frontmost-height`). Todos positivos, contados a partir da borda: o
+* `--toast-stack-sign` do `Toast.Viewport` dá o sentido. Recolhida, a pilha deixa cada toast de
+* trás aparecer 12px além do da frente, encolhido em 5% por nível e com a altura do da frente,
+* com o conteúdo apagado pelo `Toast.Content`; expandida, cada um fica na própria altura, 12px
+* depois do anterior. Entre os dois estados só muda `--toast-y` e `--toast-scale`.
+*
+* Antes da primeira medição, o toast que entra não tem `--toast-height`, nem o viewport
+* `--toast-frontmost-height`. Por isso a altura recolhida entra no `--toast-y` com reserva de
+* `0px`: uma variável inválida invalida o `transform` inteiro, que vira `none`, e a entrada perde o
+* deslize, ficando só a opacidade.
+*
+* **`transform` em vez de `translate-*` e `scale-*`.** Durante o arrasto, o Base UI escreve um
+* `transform` inline (`translateX() translateY() scale()`) para prender o toast ao dedo. As
+* propriedades `translate` e `scale`, que as utilities do Tailwind escrevem, se somam ao
+* `transform` em vez de serem trocadas por ele: o toast andaria o dobro. O `transform` daqui usa
+* as mesmas funções, na mesma ordem: ao soltar, a transição parte do inline e só interpola função
+* por função quando as listas batem. Com listas diferentes, o navegador interpola por matriz, e a
+* saída pelo arrasto volta para o meio ou vai para o lado errado.
+*
+* **Entrada e saída.** O toast entra pela borda e sai por ela, ou para o lado do arrasto que o
+* fechou, por `--toast-hidden-*`. Com movimento reduzido, só esmaece. A curva de entrada também
+* serve à pilha que expande e recolhe: o elemento tem uma transição só fora da saída.
+*
+* O `::after` cobre o espaço até o toast seguinte, do lado da borda, para a pilha expandida não
+* recolher quando o mouse passa entre dois toasts.
+*/
+const toastRootVariants = cva([
+	"[--toast-gap:--spacing(3)]",
+	"[--toast-peek:--spacing(3)]",
+	"[--toast-scale:max(0,1-var(--toast-index)*0.05)]",
+	"[--toast-collapsed-height:var(--toast-frontmost-height,var(--toast-height))]",
+	"[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-index)*var(--toast-peek)+(1-var(--toast-scale))*var(--toast-collapsed-height,0px)))]",
+	"[--toast-hidden-x:0px]",
+	"[--toast-hidden-y:0px]",
+	"data-expanded:[--toast-scale:1]",
+	"data-expanded:[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)))]",
+	"absolute",
+	"inset-x-0",
+	"z-[calc(1000-var(--toast-index))]",
+	"h-(--toast-collapsed-height)",
+	"data-expanded:h-(--toast-height)",
+	"rounded-md",
+	"corner-squircle",
+	"outline-1",
+	"outline-(--toast-border)",
+	"bg-(--toast-bg)",
+	"shadow-lg",
+	"shadow-black/12",
+	"dark:shadow-none",
+	"text-sm",
+	"text-gray-12",
+	"select-none",
+	"ring-gray-9",
+	"focus-ring-outside",
+	"after:content-['']",
+	"after:absolute",
+	"after:inset-x-0",
+	"after:h-[calc(var(--toast-gap)+1px)]",
+	"[transform:translateX(calc(var(--toast-swipe-movement-x)+var(--toast-hidden-x)))_translateY(calc(var(--toast-y)+var(--toast-swipe-movement-y)+var(--toast-hidden-y)))_scale(var(--toast-scale))]",
+	"transition-opacity",
+	"not-motion-reduced:transition-[transform,opacity,height]",
+	"duration-400",
+	"ease-enter-emphasized",
+	"data-ending-style:duration-250",
+	"data-ending-style:ease-exit",
+	"data-ending-style:data-swipe-direction:ease-enter",
+	"not-motion-reduced:data-starting-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]",
+	"not-motion-reduced:data-ending-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]",
+	"not-motion-reduced:data-ending-style:data-[swipe-direction=up]:[--toast-hidden-y:-150%]",
+	"not-motion-reduced:data-ending-style:data-[swipe-direction=down]:[--toast-hidden-y:150%]",
+	"not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-x:-150%]",
+	"not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-y:0px]",
+	"not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-x:150%]",
+	"not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-y:0px]",
+	"data-starting-style:opacity-0",
+	"data-ending-style:opacity-0",
+	"data-limited:opacity-0",
+	"data-limited:data-ending-style:[--toast-hidden-y:0px]"
+], { variants: {
+	type: {
+		neutral: neutralSurface,
+		loading: neutralSurface,
+		info: [
+			"[--toast-bg:var(--color-blue-3)]",
+			"[--toast-border:var(--color-blue-7)]",
+			"[--toast-fg:var(--color-blue-12)]"
+		],
+		success: [
+			"[--toast-bg:var(--color-green-3)]",
+			"[--toast-border:var(--color-green-7)]",
+			"[--toast-fg:var(--color-green-12)]"
+		],
+		warning: [
+			"[--toast-bg:var(--color-amber-3)]",
+			"[--toast-border:var(--color-amber-7)]",
+			"[--toast-fg:var(--color-amber-12)]"
+		],
+		error: [
+			"[--toast-bg:var(--color-red-3)]",
+			"[--toast-border:var(--color-red-7)]",
+			"[--toast-fg:var(--color-red-12)]"
+		]
+	},
+	edge: {
+		top: [
+			"top-0",
+			"origin-top",
+			"after:bottom-full"
+		],
+		bottom: [
+			"bottom-0",
+			"origin-bottom",
+			"after:top-full"
+		]
+	}
+} });
+//#endregion
+export { toastRootVariants };
+
+//# sourceMappingURL=toast-root-variants.js.map

package/dist/components/feedback/toast/toast-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-root-variants.js","names":[],"sources":["../../../../src/components/feedback/toast/toast-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/** O `type` declara estas variáveis, e o `toastRootVariants` as consome (explicado nele). */\nconst neutralSurface = [\n  '[--toast-bg:var(--color-white)]',\n  'dark:[--toast-bg:var(--color-gray-2)]',\n  '[--toast-border:var(--color-gray-6)]',\n];\n\nconst infoSurface = [\n  '[--toast-bg:var(--color-blue-3)]',\n  '[--toast-border:var(--color-blue-7)]',\n  '[--toast-fg:var(--color-blue-12)]',\n];\n\nconst successSurface = [\n  '[--toast-bg:var(--color-green-3)]',\n  '[--toast-border:var(--color-green-7)]',\n  '[--toast-fg:var(--color-green-12)]',\n];\n\nconst warningSurface = [\n  '[--toast-bg:var(--color-amber-3)]',\n  '[--toast-border:var(--color-amber-7)]',\n  '[--toast-fg:var(--color-amber-12)]',\n];\n\nconst errorSurface = [\n  '[--toast-bg:var(--color-red-3)]',\n  '[--toast-border:var(--color-red-7)]',\n  '[--toast-fg:var(--color-red-12)]',\n];\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra\n * e cor do texto estão explicados (tabela no README de `overlays`). As diferenças:\n * - posição e animação próprias, da pilha, abaixo;\n * - `shadow-lg`, como o Dialog, e anel de foco: o toast entra no Tab;\n * - o `type` colore a superfície, como o `status` do Alert: declara `--toast-bg` (passo 3, opaco,\n *   para os toasts de trás não aparecerem através dele), `--toast-border` (passo 7) e, nos tipos\n *   com cor, `--toast-fg` (passo 12), que o `Toast.Title` e o `Toast.Description` leem. O\n *   `neutral` e o `loading` ficam na superfície neutra, com o texto em gray;\n * - sem `--popover-padding`: o respiro fica no `Toast.Content`.\n *\n * **Pilha.** O Base UI escreve no toast o índice (`--toast-index`, 0 na frente), a soma das alturas\n * dos que estão à frente (`--toast-offset-y`), a altura dele (`--toast-height`) e o arrasto\n * (`--toast-swipe-movement-*`); o viewport escreve a altura do da frente\n * (`--toast-frontmost-height`). Todos positivos, contados a partir da borda: o\n * `--toast-stack-sign` do `Toast.Viewport` dá o sentido. Recolhida, a pilha deixa cada toast de\n * trás aparecer 12px além do da frente, encolhido em 5% por nível e com a altura do da frente,\n * com o conteúdo apagado pelo `Toast.Content`; expandida, cada um fica na própria altura, 12px\n * depois do anterior. Entre os dois estados só muda `--toast-y` e `--toast-scale`.\n *\n * Antes da primeira medição, o toast que entra não tem `--toast-height`, nem o viewport\n * `--toast-frontmost-height`. Por isso a altura recolhida entra no `--toast-y` com reserva de\n * `0px`: uma variável inválida invalida o `transform` inteiro, que vira `none`, e a entrada perde o\n * deslize, ficando só a opacidade.\n *\n * **`transform` em vez de `translate-*` e `scale-*`.** Durante o arrasto, o Base UI escreve um\n * `transform` inline (`translateX() translateY() scale()`) para prender o toast ao dedo. As\n * propriedades `translate` e `scale`, que as utilities do Tailwind escrevem, se somam ao\n * `transform` em vez de serem trocadas por ele: o toast andaria o dobro. O `transform` daqui usa\n * as mesmas funções, na mesma ordem: ao soltar, a transição parte do inline e só interpola função\n * por função quando as listas batem. Com listas diferentes, o navegador interpola por matriz, e a\n * saída pelo arrasto volta para o meio ou vai para o lado errado.\n *\n * **Entrada e saída.** O toast entra pela borda e sai por ela, ou para o lado do arrasto que o\n * fechou, por `--toast-hidden-*`. Com movimento reduzido, só esmaece. A curva de entrada também\n * serve à pilha que expande e recolhe: o elemento tem uma transição só fora da saída.\n *\n * O `::after` cobre o espaço até o toast seguinte, do lado da borda, para a pilha expandida não\n * recolher quando o mouse passa entre dois toasts.\n */\nexport const toastRootVariants = cva(\n  [\n    '[--toast-gap:--spacing(3)]',\n    '[--toast-peek:--spacing(3)]',\n    '[--toast-scale:max(0,1-var(--toast-index)*0.05)]',\n    '[--toast-collapsed-height:var(--toast-frontmost-height,var(--toast-height))]',\n    '[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-index)*var(--toast-peek)+(1-var(--toast-scale))*var(--toast-collapsed-height,0px)))]',\n    '[--toast-hidden-x:0px]',\n    '[--toast-hidden-y:0px]',\n\n    'data-expanded:[--toast-scale:1]',\n    'data-expanded:[--toast-y:calc(var(--toast-stack-sign)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)))]',\n\n    'absolute',\n    'inset-x-0',\n    // Ordena só os toasts da fila entre si: o da frente por cima.\n    'z-[calc(1000-var(--toast-index))]',\n\n    'h-(--toast-collapsed-height)',\n    'data-expanded:h-(--toast-height)',\n\n    'rounded-md',\n    'corner-squircle',\n    'outline-1',\n    'outline-(--toast-border)',\n\n    'bg-(--toast-bg)',\n\n    'shadow-lg',\n    'shadow-black/12',\n    'dark:shadow-none',\n\n    // A fila vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n    'text-sm',\n    'text-gray-12',\n\n    // Arrastar com o mouse selecionaria o texto junto.\n    'select-none',\n    'ring-gray-9',\n    'focus-ring-outside',\n\n    \"after:content-['']\",\n    'after:absolute',\n    'after:inset-x-0',\n    'after:h-[calc(var(--toast-gap)+1px)]',\n\n    '[transform:translateX(calc(var(--toast-swipe-movement-x)+var(--toast-hidden-x)))_translateY(calc(var(--toast-y)+var(--toast-swipe-movement-y)+var(--toast-hidden-y)))_scale(var(--toast-scale))]',\n\n    'transition-opacity',\n    'not-motion-reduced:transition-[transform,opacity,height]',\n    'duration-400',\n    'ease-enter-emphasized',\n    'data-ending-style:duration-250',\n    'data-ending-style:ease-exit',\n    // A saída pelo arrasto continua um movimento que já tem velocidade: acelerar a partir do\n    // repouso pareceria um tranco ao soltar.\n    'data-ending-style:data-swipe-direction:ease-enter',\n\n    'not-motion-reduced:data-starting-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]',\n    'not-motion-reduced:data-ending-style:[--toast-hidden-y:calc(var(--toast-stack-sign)*-150%)]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=up]:[--toast-hidden-y:-150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=down]:[--toast-hidden-y:150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-x:-150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=left]:[--toast-hidden-y:0px]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-x:150%]',\n    'not-motion-reduced:data-ending-style:data-[swipe-direction=right]:[--toast-hidden-y:0px]',\n    'data-starting-style:opacity-0',\n    'data-ending-style:opacity-0',\n\n    // Acima do `limit`, o toast fica montado (e `inert`) até sair: some sem se mover.\n    'data-limited:opacity-0',\n    'data-limited:data-ending-style:[--toast-hidden-y:0px]',\n  ],\n  {\n    variants: {\n      type: {\n        neutral: neutralSurface,\n        loading: neutralSurface,\n        info: infoSurface,\n        success: successSurface,\n        warning: warningSurface,\n        error: errorSurface,\n      },\n      edge: {\n        top: ['top-0', 'origin-top', 'after:bottom-full'],\n        bottom: ['bottom-0', 'origin-bottom', 'after:top-full'],\n      },\n    },\n  },\n);\n"],"mappings":";;;AAGA,MAAM,iBAAiB;CACrB;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA,EACE,UAAU;CACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,MAAM;GA7IZ;GACA;GACA;EA2IY;EACN,SAAS;GAxIf;GACA;GACA;EAsIe;EACT,SAAS;GAnIf;GACA;GACA;EAiIe;EACT,OAAO;GA9Hb;GACA;GACA;EA4Ha;CACT;CACA,MAAM;EACJ,KAAK;GAAC;GAAS;GAAc;EAAmB;EAChD,QAAQ;GAAC;GAAY;GAAiB;EAAgB;CACxD;AACF,EACF,CACF"}

package/dist/components/feedback/toast/toast-root.d.ts

@@ -0,0 +1,34 @@
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-root.d.ts
+export type ToastRootProps = Toast.Root.Props;
+export type ToastRootState = Toast.Root.State;
+export type ToastRootToastObject = Toast.Root.ToastObject;
+/**
+ * Um toast da fila, desenhado como superfície. Vai dentro do `Toast.Viewport`, de onde lê a
+ * `position`: ela decide de onde o toast entra e o gesto que o fecha (de volta para a borda e para
+ * o lado da fila, ou os dois lados no centro). O `swipeDirection` passado vence.
+ *
+ * O Base UI dá ao toast `role="dialog"`, ligado ao `Toast.Title` e ao `Toast.Description`, e o põe
+ * no Tab, com `Esc` para fechar.
+ *
+ * @example
+ * ```tsx
+ * const { toasts } = Toast.useManager();
+ *
+ * return toasts.map((toast) => (
+ *   <Toast.Root key={toast.id} toast={toast}>
+ *     <Toast.Content>
+ *       <Toast.Indicator />
+ *       <Toast.Title />
+ *       <Toast.Close render={<CloseButton size="2xs" />} />
+ *     </Toast.Content>
+ *   </Toast.Root>
+ * ));
+ * ```
+ */
+export declare const ToastRoot: {
+  (props: ToastRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=toast-root.d.ts.map

package/dist/components/feedback/toast/toast-root.js

@@ -0,0 +1,67 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { ToastRootContextProvider } from "./use-toast-root-context.js";
+import { toastPlacements } from "./toast-placement.js";
+import { toastRootVariants } from "./toast-root-variants.js";
+import { toastDefaultVariants, useToastContext } from "./use-toast-context.js";
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-root.tsx
+/**
+* Um toast da fila, desenhado como superfície. Vai dentro do `Toast.Viewport`, de onde lê a
+* `position`: ela decide de onde o toast entra e o gesto que o fecha (de volta para a borda e para
+* o lado da fila, ou os dois lados no centro). O `swipeDirection` passado vence.
+*
+* O Base UI dá ao toast `role="dialog"`, ligado ao `Toast.Title` e ao `Toast.Description`, e o põe
+* no Tab, com `Esc` para fechar.
+*
+* @example
+* ```tsx
+* const { toasts } = Toast.useManager();
+*
+* return toasts.map((toast) => (
+*   <Toast.Root key={toast.id} toast={toast}>
+*     <Toast.Content>
+*       <Toast.Indicator />
+*       <Toast.Title />
+*       <Toast.Close render={<CloseButton size="2xs" />} />
+*     </Toast.Content>
+*   </Toast.Root>
+* ));
+* ```
+*/
+const ToastRoot = (props) => {
+	const { toast, className, ...rest } = props;
+	const { position = toastDefaultVariants.position } = useToastContext();
+	const { edge, swipeDirection } = toastPlacements[position];
+	const type = isToastType(toast.type) ? toast.type : "neutral";
+	return /* @__PURE__ */ jsx(ToastRootContextProvider, {
+		value: { type },
+		children: /* @__PURE__ */ jsx(Toast.Root, {
+			"data-component": "Toast.Root",
+			toast,
+			swipeDirection,
+			className: mergeStateClassNames(toastRootVariants({
+				edge,
+				type
+			}), className),
+			...rest
+		})
+	});
+};
+ToastRoot.displayName = "Toast.Root";
+const toastTypes = /* @__PURE__ */ new Set([
+	"neutral",
+	"info",
+	"success",
+	"warning",
+	"error",
+	"loading"
+]);
+/**
+* O tipo chega do Base UI como `string`: quem monta a fila com as partes pode passar qualquer um.
+*/
+const isToastType = (value) => value !== void 0 && toastTypes.has(value);
+//#endregion
+export { ToastRoot };
+
+//# sourceMappingURL=toast-root.js.map

package/dist/components/feedback/toast/toast-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-root.js","names":["BaseToast"],"sources":["../../../../src/components/feedback/toast/toast-root.tsx"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui/react/toast';\nimport { mergeStateClassNames } from '#utils';\nimport type { ToastType } from './toast-manager';\nimport { toastPlacements } from './toast-placement';\nimport { toastRootVariants } from './toast-root-variants';\nimport { toastDefaultVariants, useToastContext } from './use-toast-context';\nimport { ToastRootContextProvider } from './use-toast-root-context';\n\nexport type ToastRootProps = BaseToast.Root.Props;\n\nexport type ToastRootState = BaseToast.Root.State;\n\nexport type ToastRootToastObject = BaseToast.Root.ToastObject;\n\n/**\n * Um toast da fila, desenhado como superfície. Vai dentro do `Toast.Viewport`, de onde lê a\n * `position`: ela decide de onde o toast entra e o gesto que o fecha (de volta para a borda e para\n * o lado da fila, ou os dois lados no centro). O `swipeDirection` passado vence.\n *\n * O Base UI dá ao toast `role=\"dialog\"`, ligado ao `Toast.Title` e ao `Toast.Description`, e o põe\n * no Tab, com `Esc` para fechar.\n *\n * @example\n * ```tsx\n * const { toasts } = Toast.useManager();\n *\n * return toasts.map((toast) => (\n *   <Toast.Root key={toast.id} toast={toast}>\n *     <Toast.Content>\n *       <Toast.Indicator />\n *       <Toast.Title />\n *       <Toast.Close render={<CloseButton size=\"2xs\" />} />\n *     </Toast.Content>\n *   </Toast.Root>\n * ));\n * ```\n */\nexport const ToastRoot = (props: ToastRootProps) => {\n  const { toast, className, ...rest } = props;\n\n  const { position = toastDefaultVariants.position } = useToastContext();\n\n  const { edge, swipeDirection } = toastPlacements[position];\n\n  const type = isToastType(toast.type) ? toast.type : 'neutral';\n\n  return (\n    <ToastRootContextProvider value={{ type }}>\n      <BaseToast.Root\n        data-component=\"Toast.Root\"\n        toast={toast}\n        swipeDirection={swipeDirection}\n        className={mergeStateClassNames(\n          toastRootVariants({ edge, type }),\n          className,\n        )}\n        {...rest}\n      />\n    </ToastRootContextProvider>\n  );\n};\n\nToastRoot.displayName = 'Toast.Root';\n\nconst toastTypes: ReadonlySet<string> = new Set<ToastType>([\n  'neutral',\n  'info',\n  'success',\n  'warning',\n  'error',\n  'loading',\n]);\n\n/**\n * O tipo chega do Base UI como `string`: quem monta a fila com as partes pode passar qualquer um.\n */\nconst isToastType = (value: string | undefined): value is ToastType =>\n  value !== undefined && toastTypes.has(value);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,OAAO,WAAW,GAAG,SAAS;CAEtC,MAAM,EAAE,WAAW,qBAAqB,aAAa,gBAAgB;CAErE,MAAM,EAAE,MAAM,mBAAmB,gBAAgB;CAEjD,MAAM,OAAO,YAAY,MAAM,IAAI,IAAI,MAAM,OAAO;CAEpD,OACE,oBAAC,0BAAD;EAA0B,OAAO,EAAE,KAAK;EACtC,UAAA,oBAACA,MAAU,MAAX;GACE,kBAAe;GACR;GACS;GAChB,WAAW,qBACT,kBAAkB;IAAE;IAAM;GAAK,CAAC,GAChC,SACF;GACA,GAAI;EACL,CAAA;CACuB,CAAA;AAE9B;AAEA,UAAU,cAAc;AAExB,MAAM,6BAAkC,IAAI,IAAe;CACzD;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;;;AAKD,MAAM,eAAe,UACnB,UAAU,KAAA,KAAa,WAAW,IAAI,KAAK"}

package/dist/components/feedback/toast/toast-title.d.ts

@@ -0,0 +1,18 @@
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/feedback/toast/toast-title.d.ts
+export type ToastTitleProps = Toast.Title.Props;
+export type ToastTitleState = Toast.Title.State;
+/**
+ * Título do toast: sem filhos, mostra o `title` do toast, e some quando ele não tem um. Dá o nome
+ * do toast para o leitor de tela.
+ *
+ * Cópia do `Alert.Title`, a origem (tabela no README de `feedback`): foge da tabela de tipografia,
+ * no tamanho da descrição (`text-sm/5`), diferenciado pelo peso, para o toast ficar compacto. A
+ * diferença: é o `h2` do Base UI, e a cor vem de `--toast-fg`, que o `type` declara.
+ */
+export declare const ToastTitle: {
+  (props: ToastTitleProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=toast-title.d.ts.map