@pollinations/ui 0.1.0-alpha.1 → 0.1.0-alpha.11

package/README.md

@@ -32,14 +32,62 @@ import { AppUserMenu } from "@pollinations/ui/app-user-menu/sdk";
 export function App() {
     return (
         <PolliProvider appKey="pk_your_publishable_key" permissions={["profile"]}>
-            <Surface data-theme="amber">
-                <AppUserMenu dashboardHref="https://enter.pollinations.ai" />
+            <Surface>
+                <AppUserMenu />
             </Surface>
         </PolliProvider>
     );
 }
 ```
 
+### CDN / `<script>` Tag
+
+The root `@pollinations/ui` entry also ships a browser IIFE bundle for
+no-build pages. It exposes SDK-free primitives and compositions on
+`window.PollinationsUI`. Non-root subpaths such as `@pollinations/ui/auth`,
+`@pollinations/ui/wallet`, `@pollinations/ui/gen`, and
+`@pollinations/ui/app-user-menu/sdk` remain ESM/CJS-only.
+
+React 19 no longer ships UMD builds, so load React from an ESM CDN first, set
+the globals expected by the IIFE bundle, then load `@pollinations/ui`:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@pollinations/ui@alpha/styles.css"
+/>
+<div id="root"></div>
+<script type="module">
+  import React from "https://esm.sh/react@19";
+  import * as ReactDOM from "https://esm.sh/react-dom@19";
+  import * as ReactDOMClient from "https://esm.sh/react-dom@19/client";
+
+  window.React = React;
+  window.ReactDOM = { ...ReactDOM, ...ReactDOMClient };
+
+  await new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://cdn.jsdelivr.net/npm/@pollinations/ui@alpha";
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+
+  const { Button } = window.PollinationsUI;
+
+  window.ReactDOM.createRoot(document.getElementById("root")).render(
+    React.createElement(Button, null, "Generate"),
+  );
+</script>
+```
+
+The browser bundle keeps React and ReactDOM external via those globals, but it
+does bundle the root entry's package dependencies, including Ark UI,
+react-markdown, remark, and rehype.
+
+React's guidance on loading React 19 without UMD builds:
+https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed
+
 For Pollinations apps that use unprefixed Tailwind utilities, import the
 package-owned app stylesheet instead:
 
@@ -53,46 +101,107 @@ and generic `polli-ui-root`, `polli-ui-body`, and `polli-ui-shell` classes.
 Canonical Pollinations source SVGs are exported from the package:
 
 ```ts
-import logoUrl from "@pollinations/ui/assets/logo.svg";
-import logoWordmarkUrl from "@pollinations/ui/assets/logo-wordmark.svg";
+import markUrl from "@pollinations/ui/brand/mark.svg";
+import lockupUrl from "@pollinations/ui/brand/lockup-horizontal.svg";
 ```
 
 The SVG sources use `currentColor`. Apps control the rendered color by inlining
 them or using them as masks. Root-level favicon, PWA icon, and SEO files stay
 app-owned.
 
+The whole kit derives from two atomic sources — `mark.svg` and `wordmark.svg`
+(both `currentColor`) plus the raster bee `polli/polli.png`. One zero-config
+command rebuilds everything:
+
+```bash
+npm run brand
+```
+
+It refreshes the committed derivatives in `src/brand`, and writes every
+favicon / PWA / apple-touch / maskable / OG / social asset to `brand-out/`
+(gitignored) — copy those into a site's `public/`. Colours are fixed to the two
+brand themes matching enter.pollinations.ai (icons gold on transparent,
+OG/social dark on cream), resolved from `theme-palette.json`. Sizes and padding
+are data in `scripts/brand/presets.js` — `pad` keeps avatars clear of a circular
+mask; add a platform by adding a line.
+
 Wallet colors and utilities are bundled into the main stylesheet
 (`@pollinations/ui/styles.css`) — no separate import needed.
 
+## Dialog layout
+
+`Dialog` keeps rounded corners at every width. Below 480px it spans the phone
+width with an 8px vertical gap; larger viewports have a 16px outer inset and use
+the `size` width limit. Height follows the content, capped by the available
+viewport. Confirmations and completed results follow the same phone-width rule.
+
+Use `DialogHeader`, `DialogBody` (scrolling content), and `DialogFooter` for
+consistent spacing and actions. The frame uses Enter's themed panel color;
+inner cards use the neutral `Surface` default. `AuthModal` uses the same frame
+for standalone pages. Content such as document previews can request a height,
+which remains capped by the shared frame.
+
+Enter's `ResourceDialog` keeps expandable forms top-aligned at every width;
+completed results use the centered `Dialog`. Both inherit the same viewport sizing.
+
+Actions that write server data use a bordered button (`intent="commit"`).
+Navigation and export actions, including device Continue and Copy and close,
+use the default filled style. Sign-in uses `intent="brand"`; destructive
+confirmations use `intent="danger"`. Cancel/Decline/Close actions use the muted,
+borderless `intent="neutral"` style.
+Saved-card checkout preserves its dedicated footer: full-width Confirm with
+Cancel and the alternative payment-method link on the line below.
+
 ## What's exported
 
 - `@pollinations/ui` exports SDK-free design primitives, helpers, and
-  theme data. These can be used without Pollinations auth.
-- `@pollinations/ui/auth` exports SDK-free auth modal pieces:
+  compositions. These can be used without Pollinations auth.
+- `@pollinations/ui/auth` exports `PollinationsSignInButton` (official brand
+  asset, outlined amber styling, accessible provider label) and `DashboardSignIn`
+  (the shared satellite-app sign-in page). Apps supply the sign-in action; these
+  components do not issue credentials or choose an authentication method.
+- `@pollinations/ui/auth` also exports SDK-free auth modal pieces:
   `AuthModal`, `AuthModalHeader`, `AuthModalLoading`, `AuthInfoCard`, and
   `ErrorBanner`.
+- `@pollinations/ui/auth/sdk` exports identity/session components that read
+  from the surrounding `<PolliProvider>`:
+  - **null when not logged in (or before data loads):** `UserAvatar`,
+    `UserName`, `WhenLoggedIn`.
+  - **shown only when logged out:** `LoginButton`, `WhenLoggedOut`.
+
+  These are intentionally bare wrappers around `useAuth*` hooks. They render
+  the data and nothing else — no default copy and no default intent. The app
+  composes layout, copy, and color.
 - `@pollinations/ui/wallet` exports SDK-free wallet-specific display helpers
-  and recipes: `formatPollen`, `PaidChip`, `TierChip`, `WalletDot`,
+  and recipes: `formatPollen`, `PaidChip`, `TierChip`, `WalletKindIcon`,
   `WalletBalanceCard`, `PAID_BALANCE_CHART_COLOR`, and
   `TIER_BALANCE_CHART_COLOR`.
 - `@pollinations/ui/app-user-menu/sdk` exports the SDK-backed app account
   menu module.
-- `@pollinations/ui/gen` exports the generation UI — `ModelSelector`,
-  category labels, and the model-modality theme mapping.
-- `@pollinations/ui/assets/*` exports canonical Pollinations source SVGs:
-  `logo.svg` and `logo-wordmark.svg`.
+- `@pollinations/ui/gen` exports generation UI modules and modality helpers:
+  `ModelSelector`, `ModalityChip`, `ModalityDot`, `ModalityTab`,
+  `categoryLabel`, and `getModalityKey`.
+- `@pollinations/ui/markdown` exports `Markdown` and `Prose`, kept off the
+  root entry so react-markdown only loads where documents render.
+- `@pollinations/ui/brand/*` exports the canonical brand kit — `mark`,
+  `wordmark`, `lockup-horizontal`, `lockup-stacked` (currentColor SVG masters
+  plus `-black`/`-white` SVG + PNG), and the `polli/` mascot PNGs.
 - **Design primitives** — `Button`, `ButtonGroup`, `Chip`, `ChevronIcon`,
   `Dialog`, `DialogTitle`, `Dropdown`, `DropdownItem`, `Field`, `Heading`,
   `IconButton`, `InlineLink`, `Input`, `ScrollArea`, `Slider`, `Surface`,
   `Switch`, `TabButton`, `Table`, `TableBody`, `TableCell`, `TableHead`,
   `TableHeaderCell`, `TableRow`, `Text`, `Textarea`, `Tooltip`.
 - **Design compositions** — `Alert`, `CodeBlock`, `Collapsible`,
-  `CopyButton`, `ExternalLinkButton`, `FileUpload`, `InfoTip`, `LinkCard`,
-  `Markdown`, `MediaPlaceholder`, `MultiSelect`, `NavItem`, `PeriodPicker`,
-  `Prose`, `Section`, `StatCard`.
+  `CopyButton`, `EditableCombobox`, `EditableComboboxToken`,
+  `ExternalLinkButton`, `FieldStack`, `FileUpload`, `InfoTip`, `LinkCard`,
+  `MediaPlaceholder`, `MultiSelect`, `NavItem`, `PeriodPicker`, `Section`,
+  `StatCard`.
+  `FieldStack` supports label, helper, action, error, and opt-in aligned label
+  rows for compact forms.
+  `EditableCombobox.startContent` renders content inside a wrapping input shell
+  and replaces the standalone chevron trigger.
 - **Helpers** — `cn`, `useScrollLock`, `currentPeriod`,
   `getPeriodBucketKeys`, `periodBucketKeyToDate`.
-- **Theme** — `themes` (runtime array of theme names), `ThemeName` (type).
 
 For per-request usage data and other dynamic queries, call the opt-in hooks
 from `@pollinations/sdk/react` (`useAccountKeyUsage`, `useAccountKey`,
@@ -106,15 +215,19 @@ from `@pollinations/sdk/react` (`useAccountKeyUsage`, `useAccountKey`,
   such as auth, wallet, app-user-menu, and gen.
 - Public subpath exports (`@pollinations/ui/auth`,
   `@pollinations/ui/wallet`, `@pollinations/ui/gen`,
-  `@pollinations/ui/app-user-menu/sdk`) are built directly from those source
-  layers.
+  `@pollinations/ui/markdown`, `@pollinations/ui/app-user-menu/sdk`) are
+  built directly from those source layers.
 
 ## Theming
 
-Set `data-theme="amber" | "blue" | "pink" | "coral" | "teal" | "violet" | "emerald"`
-on any ancestor (or per-component via the `theme` prop on Button-family
-components) to switch the cascade. Theme variables are defined in
-`styles.css` — import it once at your app entry.
+Import `@pollinations/ui/styles.css` once at the app entry. The package uses a
+single app accent by default; primitives read the current cascade through
+`--polli-color-*` variables.
+
+Use `data-theme="neutral"` on chrome that should carry no accent, such as a
+global rail. Use `data-theme="accent"` inside a neutral subtree to re-assert
+the app accent for controls. Do not use per-component theme props; compose
+layout and state with primitives instead.
 
 ## Public design tokens
 
@@ -125,7 +238,7 @@ count as breaking.
 Public tokens sit under the `--polli-*` namespace so they do not collide
 with host app tokens.
 
-**Theme-aware (resolve against the active `data-theme`):**
+**Accent-aware (resolve against the current accent or neutral scope):**
 
 | Token                         | Purpose                                       |
 | ----------------------------- | --------------------------------------------- |
@@ -159,23 +272,22 @@ Wallet tokens are public (bundled into `@pollinations/ui/styles.css`):
 | `--polli-color-paid-pale`     | Paid-balance wash.                            |
 | `--polli-color-paid-soft`     | Paid-balance marker.                          |
 | `--polli-color-paid-deep`     | Paid-balance text.                            |
-| `--polli-color-tier-pale`     | Tier-balance wash.                            |
-| `--polli-color-tier-soft`     | Tier-balance marker.                          |
-| `--polli-color-tier-deep`     | Tier-balance text.                            |
+| `--polli-color-tier-pale`     | Quest Pollen wash.                            |
+| `--polli-color-tier-soft`     | Quest Pollen marker.                          |
+| `--polli-color-tier-deep`     | Quest Pollen text.                            |
 
 **Intent (theme-independent):**
 
-| Token                             | Purpose                          |
-| --------------------------------- | -------------------------------- |
-| `--polli-color-danger-bg-light`   | Error surface background.        |
-| `--polli-color-danger-text`       | Error text foreground.           |
-| `--polli-color-danger-border`     | Error border.                    |
-| `--polli-color-success-bg-light`  | Success surface background.      |
-| `--polli-color-success-text`      | Success text foreground.         |
-| `--polli-color-success-border`    | Success border.                  |
-| `--polli-color-warning-bg-light`  | Warning surface background.      |
-| `--polli-color-warning-text`      | Warning text foreground.         |
-| `--polli-color-warning-border`    | Warning border.                  |
+| Token                                      | Purpose                          |
+| ------------------------------------------ | -------------------------------- |
+| `--polli-color-danger-bg-light`            | Error surface background.        |
+| `--polli-color-danger-text`                | Error text foreground.           |
+| `--polli-color-danger-border`              | Error border.                    |
+| `--polli-color-success-text`               | Success text foreground.         |
+| `--polli-color-success-bright`             | Filled success background.       |
+| `--polli-color-success-text-on-bright`     | Text on filled success surfaces. |
+| `--polli-color-warning-bg-light`           | Warning surface background.      |
+| `--polli-color-warning-text`               | Warning text foreground.         |
 
 **Example:**
 

package/dist/Button-BGqClaBr.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, ReactNode } from 'react';
+
+/** Semantic action roles. Label recipes live on Chip. */
+type ButtonIntent = "danger" | "info" | "neutral" | "brand" | "commit" | "surface";
+type ButtonAppearance = "pill" | "raised";
+declare const pillSizes: {
+    readonly icon: "polli:h-12 polli:w-12 polli:p-0";
+    readonly xs: "polli:h-5 polli:px-1.5 polli:py-0 polli:text-[11px] polli:leading-none";
+    readonly sm: "polli:min-h-7 polli:px-2 polli:pt-0.5 polli:pb-1";
+    readonly md: "polli:min-h-9 polli:px-4 polli:pt-1.5 polli:pb-2";
+    readonly lg: "polli:min-h-12 polli:px-6 polli:py-3 polli:text-base";
+};
+type BaseButtonProps = {
+    icon?: ReactNode;
+    /** Optional semantic recipe; omit for the ambient theme button. */
+    intent?: ButtonIntent;
+    /** `raised` is the stronger website CTA treatment. */
+    appearance?: ButtonAppearance;
+    size?: keyof typeof pillSizes;
+    className?: string;
+    disabled?: boolean;
+};
+type ButtonProps<T extends React.ElementType = "button"> = PropsWithChildren<BaseButtonProps> & {
+    as?: T;
+} & Omit<React.ComponentPropsWithoutRef<T>, keyof BaseButtonProps | "as">;
+declare function Button<T extends React.ElementType = "button">({ as, children, icon, intent, appearance, size, className, disabled, ...buttonProps }: ButtonProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type ButtonProps as B, type ButtonAppearance as a, Button as b };

package/dist/Button-BGqClaBr.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, ReactNode } from 'react';
+
+/** Semantic action roles. Label recipes live on Chip. */
+type ButtonIntent = "danger" | "info" | "neutral" | "brand" | "commit" | "surface";
+type ButtonAppearance = "pill" | "raised";
+declare const pillSizes: {
+    readonly icon: "polli:h-12 polli:w-12 polli:p-0";
+    readonly xs: "polli:h-5 polli:px-1.5 polli:py-0 polli:text-[11px] polli:leading-none";
+    readonly sm: "polli:min-h-7 polli:px-2 polli:pt-0.5 polli:pb-1";
+    readonly md: "polli:min-h-9 polli:px-4 polli:pt-1.5 polli:pb-2";
+    readonly lg: "polli:min-h-12 polli:px-6 polli:py-3 polli:text-base";
+};
+type BaseButtonProps = {
+    icon?: ReactNode;
+    /** Optional semantic recipe; omit for the ambient theme button. */
+    intent?: ButtonIntent;
+    /** `raised` is the stronger website CTA treatment. */
+    appearance?: ButtonAppearance;
+    size?: keyof typeof pillSizes;
+    className?: string;
+    disabled?: boolean;
+};
+type ButtonProps<T extends React.ElementType = "button"> = PropsWithChildren<BaseButtonProps> & {
+    as?: T;
+} & Omit<React.ComponentPropsWithoutRef<T>, keyof BaseButtonProps | "as">;
+declare function Button<T extends React.ElementType = "button">({ as, children, icon, intent, appearance, size, className, disabled, ...buttonProps }: ButtonProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type ButtonProps as B, type ButtonAppearance as a, Button as b };

package/dist/Chip-v-ADv6cz.d.cts

@@ -0,0 +1,18 @@
+import { FC, ComponentPropsWithoutRef } from 'react';
+
+/** Semantic chip labels for status and metadata badges. */
+type ChipIntent = "news" | "new" | "free" | "alpha" | "neutral" | "success" | "warning" | "info" | "danger";
+declare const chipSizes: {
+    readonly icon: "polli:h-5 polli:w-5 polli:p-0 polli:text-xs";
+    readonly sm: "polli:h-5 polli:px-2 polli:text-xs";
+    readonly md: "polli:h-6 polli:px-2.5 polli:text-sm";
+    readonly lg: "polli:h-7 polli:px-3 polli:text-sm";
+};
+type ChipProps = ComponentPropsWithoutRef<"span"> & {
+    /** Semantic intent. */
+    intent?: ChipIntent;
+    size?: keyof typeof chipSizes;
+};
+declare const Chip: FC<ChipProps>;
+
+export { Chip as C, type ChipProps as a };

package/dist/Chip-v-ADv6cz.d.ts

@@ -0,0 +1,18 @@
+import { FC, ComponentPropsWithoutRef } from 'react';
+
+/** Semantic chip labels for status and metadata badges. */
+type ChipIntent = "news" | "new" | "free" | "alpha" | "neutral" | "success" | "warning" | "info" | "danger";
+declare const chipSizes: {
+    readonly icon: "polli:h-5 polli:w-5 polli:p-0 polli:text-xs";
+    readonly sm: "polli:h-5 polli:px-2 polli:text-xs";
+    readonly md: "polli:h-6 polli:px-2.5 polli:text-sm";
+    readonly lg: "polli:h-7 polli:px-3 polli:text-sm";
+};
+type ChipProps = ComponentPropsWithoutRef<"span"> & {
+    /** Semantic intent. */
+    intent?: ChipIntent;
+    size?: keyof typeof chipSizes;
+};
+declare const Chip: FC<ChipProps>;
+
+export { Chip as C, type ChipProps as a };

package/dist/Dialog-D3Nqt8cE.d.cts

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { PropsWithChildren, ComponentPropsWithoutRef, ReactNode, FC } from 'react';
+import { Dialog as Dialog$1 } from '@ark-ui/react/dialog';
+
+type ScrollAxis = "y" | "x" | "both";
+type ScrollAreaOwnProps = {
+    /** Scroll direction. Default `y`. */
+    axis?: ScrollAxis;
+    /** Use the system scrollbar instead of the custom auto-hiding track. */
+    scrollbar?: "subtle" | "native";
+    className?: string;
+};
+type ScrollAreaProps = PropsWithChildren<ScrollAreaOwnProps & Omit<ComponentPropsWithoutRef<"div">, keyof ScrollAreaOwnProps>>;
+/** Scroll container with an optional themed, auto-hiding scrollbar. */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaOwnProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ScrollAreaOwnProps> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const sizeClasses: {
+    readonly sm: "polli:max-w-md";
+    readonly md: "polli:max-w-xl";
+    readonly lg: "polli:max-w-[800px]";
+    readonly xl: "polli:max-w-6xl";
+};
+type DialogProps = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: ReactNode;
+    triggerAsChild?: boolean;
+    triggerClassName?: string;
+    title?: ReactNode;
+    ariaLabel?: string;
+    labelledBy?: string;
+    size?: keyof typeof sizeClasses;
+    showBackdrop?: boolean;
+    backdropBlur?: boolean;
+    positionerClassName?: string;
+    contentClassName?: string;
+    children: ReactNode;
+};
+declare const Dialog: FC<DialogProps>;
+declare const DialogTitle: react.ForwardRefExoticComponent<Dialog$1.TitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: react.ForwardRefExoticComponent<Dialog$1.DescriptionProps & react.RefAttributes<HTMLDivElement>>;
+type DialogHeaderProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & {
+    title?: ReactNode;
+    description?: ReactNode;
+    inBody?: boolean;
+    titleClassName?: string;
+    descriptionClassName?: string;
+};
+declare const DialogHeader: FC<DialogHeaderProps>;
+type DialogFooterProps = ComponentPropsWithoutRef<"div">;
+type DialogBodyProps = ScrollAreaProps & {
+    actions?: ReactNode;
+    footnote?: ReactNode;
+    bodyClassName?: string;
+};
+/**
+ * Scroll area whose actions follow the content and stay pinned to the bottom
+ * once the content scrolls, so a short screen never opens a gap above them.
+ */
+declare function DialogBody({ children, actions, footnote, bodyClassName, className, ...props }: DialogBodyProps): react_jsx_runtime.JSX.Element;
+declare const DialogFooter: FC<DialogFooterProps>;
+
+export { type DialogProps as D, type ScrollAreaProps as S, Dialog as a, DialogBody as b, type DialogBodyProps as c, DialogDescription as d, DialogFooter as e, type DialogFooterProps as f, DialogHeader as g, type DialogHeaderProps as h, DialogTitle as i, ScrollArea as j };

package/dist/Dialog-D3Nqt8cE.d.ts

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { PropsWithChildren, ComponentPropsWithoutRef, ReactNode, FC } from 'react';
+import { Dialog as Dialog$1 } from '@ark-ui/react/dialog';
+
+type ScrollAxis = "y" | "x" | "both";
+type ScrollAreaOwnProps = {
+    /** Scroll direction. Default `y`. */
+    axis?: ScrollAxis;
+    /** Use the system scrollbar instead of the custom auto-hiding track. */
+    scrollbar?: "subtle" | "native";
+    className?: string;
+};
+type ScrollAreaProps = PropsWithChildren<ScrollAreaOwnProps & Omit<ComponentPropsWithoutRef<"div">, keyof ScrollAreaOwnProps>>;
+/** Scroll container with an optional themed, auto-hiding scrollbar. */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaOwnProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ScrollAreaOwnProps> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const sizeClasses: {
+    readonly sm: "polli:max-w-md";
+    readonly md: "polli:max-w-xl";
+    readonly lg: "polli:max-w-[800px]";
+    readonly xl: "polli:max-w-6xl";
+};
+type DialogProps = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: ReactNode;
+    triggerAsChild?: boolean;
+    triggerClassName?: string;
+    title?: ReactNode;
+    ariaLabel?: string;
+    labelledBy?: string;
+    size?: keyof typeof sizeClasses;
+    showBackdrop?: boolean;
+    backdropBlur?: boolean;
+    positionerClassName?: string;
+    contentClassName?: string;
+    children: ReactNode;
+};
+declare const Dialog: FC<DialogProps>;
+declare const DialogTitle: react.ForwardRefExoticComponent<Dialog$1.TitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: react.ForwardRefExoticComponent<Dialog$1.DescriptionProps & react.RefAttributes<HTMLDivElement>>;
+type DialogHeaderProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & {
+    title?: ReactNode;
+    description?: ReactNode;
+    inBody?: boolean;
+    titleClassName?: string;
+    descriptionClassName?: string;
+};
+declare const DialogHeader: FC<DialogHeaderProps>;
+type DialogFooterProps = ComponentPropsWithoutRef<"div">;
+type DialogBodyProps = ScrollAreaProps & {
+    actions?: ReactNode;
+    footnote?: ReactNode;
+    bodyClassName?: string;
+};
+/**
+ * Scroll area whose actions follow the content and stay pinned to the bottom
+ * once the content scrolls, so a short screen never opens a gap above them.
+ */
+declare function DialogBody({ children, actions, footnote, bodyClassName, className, ...props }: DialogBodyProps): react_jsx_runtime.JSX.Element;
+declare const DialogFooter: FC<DialogFooterProps>;
+
+export { type DialogProps as D, type ScrollAreaProps as S, Dialog as a, DialogBody as b, type DialogBodyProps as c, DialogDescription as d, DialogFooter as e, type DialogFooterProps as f, DialogHeader as g, type DialogHeaderProps as h, DialogTitle as i, ScrollArea as j };