@imfusion/web-ui 0.10.1-dev.2.gb6347f49 → 0.10.1-dev.33.g8275f59f

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,148 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { VariantProps } from 'class-variance-authority';
+import * as ScrollArea from '../scroll-area/scroll-area';
+type HeaderVariant = "primary" | "main" | "support" | "minor";
+declare const dialogTrigger: (props?: ({
+    inline?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const dialogStatus: (props?: ({
+    variant?: "positive" | "negative" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const createHandle: typeof DialogPrimitive.createHandle;
+type RootProps<Payload = unknown> = React.ComponentProps<typeof DialogPrimitive.Root<Payload>>;
+/**
+ * Dialog.Root — container that manages open/closed state.
+ *
+ * @see https://base-ui.com/react/components/dialog
+ * @llm https://base-ui.com/react/components/dialog.md
+ */
+export declare function Root<Payload = unknown>(props: RootProps<Payload>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Dialog.Trigger — button that opens the dialog. `inline` styles it as a dashed-underlined term inside running text. */
+export declare function Trigger({ inline, ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger> & VariantProps<typeof dialogTrigger>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Trigger {
+    var displayName: string;
+}
+/** Dialog.Portal — renders backdrop and popup in a portal outside the main document flow. */
+export declare function Portal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Portal {
+    var displayName: string;
+}
+/** Dialog.Backdrop — flat dark overlay that dims the page behind the dialog. */
+export declare function Backdrop(props: React.ComponentProps<typeof DialogPrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Backdrop {
+    var displayName: string;
+}
+/** Dialog.Viewport — full-screen container that centres the popup. */
+export declare function Viewport(props: React.ComponentProps<typeof DialogPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Viewport {
+    var displayName: string;
+}
+interface PopupProps extends React.ComponentProps<typeof DialogPrimitive.Popup> {
+    /**
+     * Width of the window. `full` fills the screen minus a margin.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "full";
+}
+/** Dialog.Popup — the window. Holds Header, Body, and Footer, or any free content. */
+export declare function Popup({ size, ...props }: PopupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Popup {
+    var displayName: string;
+}
+type HeaderProps = React.ComponentProps<"div"> & {
+    /**
+     * Colour of the header band. On `primary` the title, description, and close button turn light.
+     * @default 'main'
+     */
+    variant?: HeaderVariant;
+};
+/** Dialog.Header — band at the top of the popup that holds the title, description, and close button. */
+export declare function Header({ variant, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Header {
+    var displayName: string;
+}
+/** Dialog.Body — the scrolling region between header and footer, a ScrollArea with the library's thumb and edge fades. */
+export declare function Body({ children, ...props }: React.ComponentProps<typeof ScrollArea.Auto>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Body {
+    var displayName: string;
+}
+/** Dialog.Footer — row of actions pinned to the bottom of the popup. */
+export declare function Footer(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare namespace Footer {
+    var displayName: string;
+}
+type StatusProps = React.ComponentProps<"div"> & VariantProps<typeof dialogStatus>;
+/**
+ * Dialog.Status — a tinted column at the start of the popup, spanning its full height, that marks the dialog's
+ * status with the variant's glyph. Place it first inside `Dialog.Popup`. Pass children to replace the glyph.
+ * Decorative (`aria-hidden`); the title carries the status.
+ */
+export declare function Status({ variant, children, ...props }: StatusProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Status {
+    var displayName: string;
+}
+/** Dialog.Title — heading that names the dialog for screen readers, set as `Typo.H2`. Light on a `primary` header. */
+export declare function Title(props: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Title {
+    var displayName: string;
+}
+/** Dialog.Description — supplementary paragraph that describes the dialog for screen readers, set as `Typo.P`. */
+export declare function Description(props: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Description {
+    var displayName: string;
+}
+/**
+ * Dialog.Close — button that closes the dialog. With no `children` and no `render` it renders the library's ghost close
+ * button (an × icon labelled "Close"); otherwise render your own `Button`.
+ */
+export declare function Close(props: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Close {
+    var displayName: string;
+}
+type ComposedProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, "children"> & {
+    /** Heading of the dialog. */
+    title: React.ReactNode;
+    /** Short uppercase label above the title. */
+    eyebrow?: React.ReactNode;
+    /** Line of context under the title. */
+    description?: React.ReactNode;
+    /** Adds a `Dialog.Status` with this variant at the start of the popup. */
+    status?: NonNullable<VariantProps<typeof dialogStatus>["variant"]>;
+    /**
+     * Colour of the header band.
+     */
+    headerVariant?: HeaderVariant;
+    /**
+     * Width of the window.
+     */
+    size?: PopupProps["size"];
+    /** Content of the footer, usually buttons. The footer renders only when this is set. */
+    actions?: React.ReactNode;
+    /** Content of the body. */
+    children?: React.ReactNode;
+};
+type SimpleProps = ComposedProps & {
+    /** Element rendered as the trigger, such as a `Button`. Omit it for a controlled dialog. */
+    trigger?: React.ReactElement;
+};
+/**
+ * Dialog.Simple — pre-composed dialog: trigger, header with title, description, optional status and close button, a
+ * scrolling body, and an optional footer. Root props pass through.
+ */
+export declare function Simple({ trigger, headerVariant, size, ...props }: SimpleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Simple {
+    var displayName: string;
+}
+type InlineProps = ComposedProps & {
+    /** Text of the trigger, set as an inline term inside running prose. */
+    trigger: React.ReactNode;
+};
+/** Dialog.Inline — like Dialog.Simple, but the trigger is text inside a sentence. */
+export declare function Inline({ trigger, headerVariant, size, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Inline {
+    var displayName: string;
+}
+export {};

package/dist/components/dialog/dialog.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const dialogMeta: ComponentMeta;

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * as Dialog from './dialog';
+export { dialogMeta } from './dialog.meta';

package/dist/components/drawer/drawer.d.ts

@@ -63,7 +63,7 @@ export declare namespace Popup {
     var displayName: string;
 }
 /** Drawer.Content — scrollable content wrapper inside the popup. */
-export declare function Content(props: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export declare function Content({ children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Content {
     var displayName: string;
 }

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export * as ScrollArea from './scroll-area';
+export { scrollAreaMeta } from './scroll-area.meta';

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,49 @@
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+/**
+ * ScrollArea.Root — groups the viewport and its scrollbars. Give it a height or max-height.
+ *
+ * @see https://base-ui.com/react/components/scroll-area
+ * @llm https://base-ui.com/react/components/scroll-area.md
+ */
+export declare function Root(props: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** ScrollArea.Viewport — the scrolling box. It fades its content out at each edge with more to scroll. */
+export declare function Viewport(props: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Viewport {
+    var displayName: string;
+}
+/** ScrollArea.Content — wraps the scrolled content so the viewport can measure it. */
+export declare function Content(props: React.ComponentProps<typeof ScrollAreaPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Content {
+    var displayName: string;
+}
+/** ScrollArea.Scrollbar — overlay bar that shows while the area is hovered or scrolling. */
+export declare function Scrollbar(props: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Scrollbar {
+    var displayName: string;
+}
+/** ScrollArea.Thumb — the draggable part of the scrollbar. */
+export declare function Thumb(props: React.ComponentProps<typeof ScrollAreaPrimitive.Thumb>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Thumb {
+    var displayName: string;
+}
+/** ScrollArea.Corner — the square where a vertical and a horizontal scrollbar meet. */
+export declare function Corner(props: React.ComponentProps<typeof ScrollAreaPrimitive.Corner>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Corner {
+    var displayName: string;
+}
+interface AutoProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * Which scrollbars to render. `both` also adds the Corner; `none` scrolls and fades without a visible bar.
+     * @default 'vertical'
+     */
+    orientation?: "vertical" | "horizontal" | "both" | "none";
+}
+/** ScrollArea.Auto — Root, Viewport, Content, and the scrollbars for `orientation`, around `children`. */
+export declare function Auto({ orientation, children, ...props }: AutoProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Auto {
+    var displayName: string;
+}
+export {};

package/dist/components/scroll-area/scroll-area.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const scrollAreaMeta: ComponentMeta;

package/dist/components/skeleton/skeleton.d.ts

@@ -10,7 +10,7 @@ type RootProps = useRender.ComponentProps<"div"> & {
 /**
  * Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. While
  * `loading`, sets `aria-busy` and announces `label` once, however many bones it holds. When `loading` turns false, the
- * data fades in over the bones.
+ * data fades in.
  */
 declare function Root({ label, loading, animation, render, children, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
@@ -47,4 +47,19 @@ declare function Block({ width, shape, height, style, ...props }: BlockProps): i
 declare namespace Block {
     var displayName: string;
 }
-export { Root, Text, Block };
+type SuspenseProps = {
+    /** Bones shown while the children suspend. */
+    fallback: React.ReactNode;
+    /** Announced once through a visually hidden status while the fallback shows. */
+    label: string;
+    children: React.ReactNode;
+};
+/**
+ * Skeleton.Suspense — a Suspense boundary whose fallback is bones in a busy Root. When the children mount after the
+ * fallback showed, they fade in over it. Content that was ready without suspending mounts without a fade.
+ */
+declare function Suspense({ fallback, label, children }: SuspenseProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Suspense {
+    var displayName: string;
+}
+export { Root, Text, Block, Suspense };

package/dist/index.d.ts

@@ -15,10 +15,12 @@ export { Toggle, toggleMeta } from './components/toggle';
 export { ToggleGroup, toggleGroupMeta } from './components/toggle-group';
 export { AppShell, appShellMeta } from './components/app-shell';
 export { Card, cardMeta } from './components/card';
+export { Dialog, dialogMeta } from './components/dialog';
 export { Drawer, drawerMeta } from './components/drawer';
 export { Popover, popoverMeta } from './components/popover';
 export { Prose, proseMeta } from './components/prose';
 export { Row, rowMeta } from './components/row';
+export { ScrollArea, scrollAreaMeta } from './components/scroll-area';
 export { Separator, separatorMeta } from './components/separator';
 export { Stack, stackMeta } from './components/stack';
 export { AccountCard, accountCardMeta } from './components/account-card';
@@ -45,6 +47,7 @@ export { useClipboard, useColorScheme, useMediaQuery } from './hooks';
 export type { UseClipboardOptions, UseMediaQueryOptions } from './hooks';
 export { cva, cx } from 'class-variance-authority';
 export { initialsFromEmail, splitEmail } from './utils/email';
+export { withBreakHints } from './utils/break-hints';
 export { config } from './config';
 export type { ColorScheme, ColorSchemePreference } from './types/theme';
 export type { ComponentMeta, ComponentCategory, ComponentCategoryId, ComponentStatus } from './types/meta';