@botiverse/raft-ui 0.10.4 → 0.10.6

package/dist/wip.d.mts

@@ -1,5 +1,7 @@
-import { O as ButtonProps, T as DialogTrigger, i as DialogClose, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-CDHLWJtB.mjs";
+import { M as StyledProps, O as ButtonProps, T as DialogTrigger, i as DialogClose, j as DataAttributes, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-CDHLWJtB.mjs";
 import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+import { Button } from "@base-ui/react/button";
+import { useRender } from "@base-ui/react/use-render";
 import { Combobox } from "@base-ui/react/combobox";
 //#region src/components/combobox-select/combobox-select.types.d.ts
 type ComboboxSelectValue = string | number;
@@ -22,6 +24,12 @@ interface ComboboxSelectMessages {
   chipDescription: string;
   inputDescription: string;
   remove: (label: string) => string;
+  /** The placeholder of the search input at the top of the phone's bottom sheet. */
+  search: string;
+  /** The button that closes the phone's bottom sheet of a multiple select. */
+  done: string;
+  /** The close button of the phone's bottom sheet. */
+  close: string;
 }
 type RootProps = Combobox.Root.Props<unknown, boolean>;
 type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false> = Pick<RootProps, "name" | "form" | "required" | "disabled" | "readOnly" | "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "autoHighlight" | "autoComplete" | "inputValue" | "defaultInputValue" | "onInputValueChange"> & Pick<ComponentPropsWithRef<"input">, "id" | "ref" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
@@ -66,16 +74,31 @@ type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean
   emptyContent?: ReactNode;
   loadingContent?: ReactNode;
   messages?: Partial<ComboboxSelectMessages>;
+  /**
+   * On a phone (a touch screen under 48rem), more selectable options than this open a
+   * bottom sheet instead of the anchored list.
+   * @default 10
+   */
+  sheetThreshold?: number;
+  /**
+   * The title of the phone's bottom sheet. Defaults to the field's name: `aria-label`,
+   * the text of `aria-labelledby`, or the `<label>` whose `for` is the field's `id`.
+   */
+  sheetTitle?: ReactNode;
+  /** The text input: the field on a desktop, the search input of the bottom sheet on a phone. */
   inputProps?: Omit<Combobox.Input.Props, "value" | "defaultValue" | "size" | "children">;
+  /** The portal of the list, and of the phone's anchored list and bottom sheet. */
   portalProps?: Combobox.Portal.Props;
+  /** The desktop list's positioner. A phone positions its list itself. */
   positionerProps?: Omit<Combobox.Positioner.Props, "children">;
+  /** The desktop list's popup. */
   popupProps?: Omit<Combobox.Popup.Props, "children">;
   className?: string;
   style?: CSSProperties;
 };
 //#endregion
 //#region src/components/combobox-select/combobox-select.d.ts
-export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
+export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, sheetThreshold, sheetTitle, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
 //#endregion
 //#region src/components/announcement-dialog/announcement-dialog.d.ts
 export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
@@ -89,4 +112,170 @@ export declare function AnnouncementDialogFooter({ className, ...props }: Compon
 export declare function AnnouncementDialogAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
 export declare function AnnouncementDialogSecondaryAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
 //#endregion
-export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue };
+//#region src/components/comment/comment-card.d.ts
+type CommentCardProps = useRender.ComponentProps<"div"> & {
+  /** The discussion people are reading or replying to: an ink border, lifted. */
+  active?: boolean;
+};
+/**
+ * The card of one discussion: its comments, a line such as "2 replies", and
+ * the reply box when it is open. A `div`; which parts it holds (collapsed or
+ * open) is the caller's choice. To open it with a click, add
+ * `CommentCardTrigger`.
+ */
+export declare function CommentCard({ className, render, active, ...props }: CommentCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CommentCardTriggerProps = useRender.ComponentProps<"button">;
+/**
+ * A button laid over the whole card, for a collapsed card that opens when it
+ * is clicked or chosen with the keyboard. It has no text of its own: give it
+ * an `aria-label` ("Comment from Martin").
+ */
+export declare function CommentCardTrigger({ className, render, ...props }: CommentCardTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CommentCardMetaProps = useRender.ComponentProps<"div">;
+/**
+ * A short line about the discussion, in the caller's words: how many replies
+ * it has, that it is about the whole document, or that the passage it was on
+ * can no longer be found.
+ */
+export declare function CommentCardMeta({ className, render, ...props }: CommentCardMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CommentCardQuoteProps = useRender.ComponentProps<"span">;
+/**
+ * The passage the discussion is about, in the caller's words (usually the
+ * quoted text). Hidden on screen, where the card's place beside the
+ * highlighted passage says it; give it an `id` and point the
+ * `aria-describedby` of `CommentCardTrigger` or `CommentMarker` at it, so a
+ * screen reader says which passage a card is about.
+ */
+export declare function CommentCardQuote({ className, render, ...props }: CommentCardQuoteProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/components/comment/comment-entry.d.ts
+type CommentEntryProps = useRender.ComponentProps<"div">;
+/** One comment in a discussion: its header, then its text. */
+export declare function CommentEntry({ className, render, ...props }: CommentEntryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CommentEntryHeaderProps = useRender.ComponentProps<"div">;
+/** One line: the author's `Avatar` (`size="xs"`), `CommentEntryAuthor`, then `CommentEntryTime`. */
+export declare function CommentEntryHeader({ className, render, ...props }: CommentEntryHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CommentEntryAuthorProps = useRender.ComponentProps<"span">;
+/** Who wrote the comment, in bold. It truncates; the time after it doesn't. */
+export declare function CommentEntryAuthor({ className, render, ...props }: CommentEntryAuthorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CommentEntryTimeProps = useRender.ComponentProps<"time">;
+/**
+ * When the comment was written, right after the author. A `<time>`: pass the
+ * moment in `dateTime` (ISO 8601).
+ */
+export declare function CommentEntryTime({ className, render, ...props }: CommentEntryTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type CommentEntryBodyProps = useRender.ComponentProps<"div"> & {
+  /** Cuts the text to 2 lines, for a collapsed card. */
+  clamp?: boolean;
+};
+/** What the comment says. */
+export declare function CommentEntryBody({ className, render, clamp, ...props }: CommentEntryBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/components/comment/comment-highlight.d.ts
+/** The highlight of every passage that has comments (`::highlight(raft-comment)` in styles.css). */
+export declare const COMMENT_HIGHLIGHT = "raft-comment";
+/** The highlight of the passage of the open discussion (`::highlight(raft-comment-active)`). */
+export declare const COMMENT_HIGHLIGHT_ACTIVE = "raft-comment-active";
+/**
+ * Highlights the passages comments are on with the CSS Custom Highlight API,
+ * so the document's DOM is never changed: no `<mark>` is wrapped around its
+ * text. Register the ranges of every anchored comment under
+ * `COMMENT_HIGHLIGHT`, and the open discussion's under
+ * `COMMENT_HIGHLIGHT_ACTIVE`, which paints over it. Passing no ranges clears
+ * the name. Returns a function that clears it.
+ *
+ * Where the browser has no `CSS.highlights`, it does nothing: the passages are
+ * not highlighted, and the cards still say where they belong.
+ */
+export declare function setCommentHighlights(name: string, ranges: Iterable<Range>): () => void;
+//#endregion
+//#region src/components/comment/comment-margin.d.ts
+type CommentMarginProps = useRender.ComponentProps<"div"> & {
+  /** Space between two cards that would otherwise touch, in px. Default 8. */
+  gap?: number;
+};
+/**
+ * The column beside a document that holds its comment cards, each level with
+ * the passage it is about. It measures its `CommentMarginItem`s with one
+ * `ResizeObserver`, resolves their collisions with
+ * `resolveCommentMarginLayout`, and takes the height the lowest card needs.
+ * Place it beside the document so that its top is the top the items' `top`
+ * is measured from.
+ */
+export declare function CommentMargin({ className, render, style, gap, ...props }: CommentMarginProps): import("react").JSX.Element;
+type CommentMarginItemProps = useRender.ComponentProps<"div"> & {
+  /** Where the card's anchor is: its y, in px, from the top of the margin. */
+  top: number;
+  /** Pins this card to its anchor and moves the others around it. */
+  active?: boolean;
+};
+/**
+ * One card's place in a `CommentMargin`. It sits at `top`, or lower when the
+ * card above it is in the way; the active one stays at `top` and the others
+ * make room. Items with the same `top` keep the order they were first
+ * rendered in. The resolved top is `data-top`, applied as a `translateY`.
+ */
+export declare function CommentMarginItem({ className, render, style, top, active, ...props }: CommentMarginItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/components/comment/comment-margin-layout.d.ts
+/** One card in the margin: where its anchor is and how tall the card is, in px. */
+type CommentMarginLayoutItem = {
+  id: string;
+  /** The y of the card's anchor, measured from the top of the margin. */
+  top: number;
+  /** The card's rendered height. */
+  height: number;
+};
+type CommentMarginLayoutOptions = {
+  /** Space between two cards that would otherwise touch, in px. Default 8. */
+  gap?: number;
+  /** The card pinned to its anchor; the others make room around it. */
+  activeId?: string | null;
+};
+type CommentMarginLayout = {
+  /** The resolved top of each card, by id. */
+  tops: Record<string, number>;
+  /** The bottom of the lowest card: the height the margin needs. */
+  height: number;
+};
+/**
+ * Places the cards of a comment margin the way Google Docs does. Cards keep
+ * document order (by their anchor's top; equal tops keep the order given) and
+ * never overlap: each sits at its anchor, or `gap` below the card before it.
+ * The active card is pinned to its anchor instead, the cards above it are
+ * pushed up to make room and the cards below it pushed down. Nothing goes
+ * above 0: when the cards above the active one don't fit between 0 and its
+ * anchor, they stack from 0 and the active card follows them.
+ */
+export declare function resolveCommentMarginLayout(items: readonly CommentMarginLayoutItem[], { gap, activeId }?: CommentMarginLayoutOptions): CommentMarginLayout;
+//#endregion
+//#region src/components/comment/comment-marker.d.ts
+type CommentMarkerProps = StyledProps<Button.Props> & DataAttributes & {
+  /** The marker of the discussion that is open. */
+  active?: boolean;
+};
+/**
+ * Where there is no room for a margin: a small button beside a passage that
+ * has comments, with the authors' avatars (an `AvatarGroup` of up to 3
+ * `size="2xs"` avatars) and the count. It opens the discussion, in a bottom
+ * sheet. Give it an `aria-label` that starts with the count ("2 comments").
+ */
+export declare function CommentMarker({ className, render, nativeButton, active, ...props }: CommentMarkerProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/comment/use-comment-margin-fits.d.ts
+type UseCommentMarginFitsOptions = {
+  /** The narrowest the viewer may be for the margin to show, in px. Default 784. */
+  minWidth?: number;
+};
+/**
+ * Whether a viewer has room for a comment margin beside its document: true
+ * only on a desktop (from 768px with a mouse or a trackpad, the query the
+ * desktop metrics use) and while `element`, the viewer that holds the
+ * document and the margin, is at least `minWidth` wide. Otherwise show
+ * `CommentMarker`s and open discussions in a bottom sheet. Cards and markers
+ * are different trees, so this is measured in JavaScript (a
+ * `ResizeObserver` on the element), not decided by a container query.
+ */
+export declare function useCommentMarginFits(element: Element | null, { minWidth }?: UseCommentMarginFitsOptions): boolean;
+//#endregion
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, type UseCommentMarginFitsOptions };