@giddaa-housing/ui 2.1.0 → 3.0.1

package/dist/chat.d.ts

@@ -0,0 +1,208 @@
+import { t as Button } from "./button-DW5OijoR.js";
+import { InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import * as React from "react";
+//#region src/chat.d.ts
+type ChatProps = React.ComponentProps<"section">;
+/**
+ * The chat shell — a column of header, body and footer.
+ *
+ * **It sets no height on purpose.** The consumer decides: `h-[708px]`, `h-full`,
+ * `h-dvh`. Note that `ChatBody` can only scroll inside a bounded height — give
+ * this element one, or the body grows with its content and the page scrolls
+ * instead.
+ *
+ * Header and footer sit outside the scrolling region, so they never move and
+ * never need measuring. Anything that should pin *within* the scroll — tabs, a
+ * filter row — belongs in `ChatBodyBar`.
+ */
+declare function Chat({ className, ...props }: ChatProps): React.JSX.Element;
+type ChatHeaderProps = React.ComponentProps<"header">;
+/**
+ * The fixed header. Composes anything — avatar, title, actions, a sentiment bar.
+ *
+ * Its own height is free: it can wrap, gain a row, or lose one, and nothing
+ * downstream cares. Only the body scrolls.
+ */
+declare function ChatHeader({ className, ...props }: ChatHeaderProps): React.JSX.Element;
+type ChatHeaderTitleProps = React.ComponentProps<"h2">;
+/** The header's primary line — who the conversation is with. */
+declare function ChatHeaderTitle({ className, ...props }: ChatHeaderTitleProps): React.JSX.Element;
+type ChatHeaderDescriptionProps = React.ComponentProps<"p">;
+/** The header's secondary line — timezone, status, last seen. */
+declare function ChatHeaderDescription({ className, ...props }: ChatHeaderDescriptionProps): React.JSX.Element;
+type ChatHeaderIdentityProps = React.ComponentProps<"div">;
+/** Avatar and contact copy. Fills the space between navigation and actions. */
+declare function ChatHeaderIdentity({ className, ...props }: ChatHeaderIdentityProps): React.JSX.Element;
+type ChatHeaderTextProps = React.ComponentProps<"div">;
+/** Stacks the contact name and presence line at the Figma one-pixel gap. */
+declare function ChatHeaderText({ className, ...props }: ChatHeaderTextProps): React.JSX.Element;
+type ChatHeaderActionsProps = React.ComponentProps<"div">;
+/** Trailing icon actions such as video and voice calling. */
+declare function ChatHeaderActions({ className, ...props }: ChatHeaderActionsProps): React.JSX.Element;
+interface ChatHeaderActionProps extends React.ComponentProps<typeof Button> {
+  "aria-label": string;
+}
+/** A 24px header affordance. The caller supplies the icon and behaviour. */
+declare function ChatHeaderAction({ className, size, variant, ...props }: ChatHeaderActionProps): React.JSX.Element;
+type ChatFooterProps = React.ComponentProps<"footer">;
+/**
+ * The fixed footer. Wraps `ChatInput`, and owns only the chrome around it —
+ * the rule and the surface. The composer owns its internal bar padding.
+ */
+declare function ChatFooter({ className, ...props }: ChatFooterProps): React.JSX.Element;
+type ChatBodyContextValue = {
+  /** True while the view is following new content at the bottom. */
+  isPinned: boolean;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+};
+/**
+ * Read the body's scroll state — for a "jump to bottom" or "N new messages"
+ * affordance. Must be called inside `<ChatBody>`.
+ */
+declare function useChatBody(): ChatBodyContextValue;
+type ChatBodyProps = React.ComponentProps<"div">;
+/**
+ * The scrolling region of a chat. Composes anything — messages, a table, an
+ * empty state. It owns scrolling and nothing else.
+ *
+ * Two behaviours, and they are the whole point:
+ *
+ * **Following.** New content keeps the bottom in view — but only while the
+ * reader is already there. Any deliberate scroll upward hands control over
+ * immediately; returning to the bottom hands it back. It never yanks.
+ *
+ * **Prepend.** When older messages load in above, the row you were reading
+ * stays exactly where it was. This works by remembering an element and its
+ * offset from the viewport, then putting it back after the layout changes —
+ * which holds no matter where the content grew.
+ *
+ * Both are driven by one `ResizeObserver` on the content, so they also cover an
+ * image finishing its load or a bubble reflowing — things a dependency on a
+ * message array cannot see. It fires once on observe, which is what opens the
+ * view at the latest message.
+ *
+ * Children may use `sticky top-0` (see `ChatBodyBar`) — this is their scroll
+ * container.
+ */
+declare function ChatBody({ className, children, onScroll, ref, ...props }: ChatBodyProps): React.JSX.Element;
+type ChatBodyBarProps = React.ComponentProps<"div">;
+/**
+ * A bar pinned to the top of the scrolling region — tabs, a filter row, a date
+ * header. Content scrolls behind it.
+ *
+ * It needs an opaque background to hide what passes under it; `bg-canvas`
+ * matches the panel surface and can be overridden.
+ */
+declare function ChatBodyBar({ className, ...props }: ChatBodyBarProps): React.JSX.Element;
+type ChatDateDividerProps = React.ComponentProps<"time">;
+type ChatDateSectionProps = React.ComponentProps<"section">;
+/**
+ * Bounds one dated group so its sticky divider is pushed away by the next
+ * section instead of stacking with it.
+ */
+declare function ChatDateSection({ className, ...props }: ChatDateSectionProps): React.JSX.Element;
+/** Sticky date pill for the messages in its containing `ChatDateSection`. */
+declare function ChatDateDivider({ className, ...props }: ChatDateDividerProps): React.JSX.Element;
+/** The built-in attachment kinds. Custom items may use any string. */
+type ChatInputAttachKind = "file" | "video" | "image";
+interface ChatInputAttachItem {
+  /** Stable identifier handed back to `onAttach`, and the React key. */
+  kind: string;
+  /** Menu label. */
+  label: string;
+  /** Menu icon. */
+  icon?: React.ReactNode;
+  /**
+   * File types this item picks, e.g. `"image/*"` or `".pdf,.doc"`. Choosing the
+   * item opens a filtered picker and fires `onAttach`. Omit for a non-file
+   * action and pair with `onSelect`.
+   */
+  accept?: string;
+  /**
+   * Runs when the item is chosen, instead of opening a file picker — for
+   * non-file actions like "Share location" or "Send contact". Takes precedence
+   * over `accept`.
+   */
+  onSelect?: () => void;
+}
+/**
+ * The default menu — File, Video, Image. Spread it to *extend* rather than
+ * replace: `items={[...defaultChatInputAttachItems, { kind: "document", … }]}`.
+ */
+declare const defaultChatInputAttachItems: ChatInputAttachItem[];
+interface ChatInputProps extends Omit<React.ComponentProps<"form">, "onSubmit" | "defaultValue"> {
+  /** Controlled value. Omit for uncontrolled. */
+  value?: string;
+  /** Initial value when uncontrolled. */
+  defaultValue?: string;
+  /** Fires on every keystroke, controlled or not. */
+  onValueChange?: (value: string) => void;
+  /**
+   * Fires on submit — Enter, or the send button. Receives the trimmed text.
+   * Return `false` to keep an uncontrolled field's current value.
+   */
+  onSend?: (value: string) => unknown;
+  /** Clear an uncontrolled field after `onSend` accepts the value. @default true */
+  clearOnSend?: boolean;
+  /** Blocks typing, sending and attaching. */
+  disabled?: boolean;
+}
+/**
+ * The chat composer. A real `<form>`, so Enter and the send button are one
+ * submit path rather than two.
+ *
+ * Compose the parts inside it — the layout is yours, the behaviour is ours.
+ */
+declare function ChatInput({ value, defaultValue, onValueChange, onSend, clearOnSend, disabled, className, children, ...props }: ChatInputProps): React.JSX.Element;
+interface ChatInputAttachProps extends Omit<React.ComponentProps<typeof Button>, "disabled" | "onSelect" | "type"> {
+  /**
+   * Fires with the picked files and the kind that was asked for.
+   *
+   * This component selects; it does not upload. The send payload takes a URL,
+   * so the file has to be uploaded first — and that is domain work, not a
+   * shared primitive's job.
+   */
+  onAttach?: (files: File[], kind: string) => void;
+  /**
+   * The menu items. Defaults to File / Video / Image. Provide your own to add
+   * kinds (documents, location, a contact card, …) or reorder — spread
+   * {@link defaultChatInputAttachItems} to extend rather than replace. Items
+   * with `accept` open a filtered picker; items with `onSelect` run a custom
+   * action instead.
+   */
+  items?: ChatInputAttachItem[];
+  /** Styles the attachment dropdown rather than the trigger button. */
+  contentClassName?: string;
+  /** Disables the attachment picker in addition to the root disabled state. */
+  disabled?: boolean;
+}
+/** The `+` button. Opens a dropdown of file kinds, each opening a filtered picker. */
+declare function ChatInputAttach({ onAttach, items, className, contentClassName, disabled: disabledProp, "aria-label": ariaLabel, children, size, variant, ...props }: ChatInputAttachProps): React.JSX.Element;
+type ChatInputFieldProps = Omit<React.ComponentProps<typeof InputGroupInput>, "onChange" | "value">;
+/**
+ * The single-line message field.
+ *
+ * Enter sends. The `isComposing` guard stops Enter from sending while an IME
+ * candidate is being confirmed.
+ */
+declare function ChatInputField({ className, children, disabled: disabledProp, onKeyDown, type, ...props }: ChatInputFieldProps): React.JSX.Element;
+interface ChatInputActionProps extends Omit<React.ComponentProps<typeof InputGroupButton>, "type"> {
+  /** Which side of the text field owns the action. @default "inline-start" */
+  align?: React.ComponentProps<typeof InputGroupAddon>["align"];
+  /** Styles the addon wrapper around the button. */
+  addonClassName?: string;
+  /** Required because this control is icon-only by default. */
+  "aria-label": string;
+}
+/**
+ * An accessible button inside the field — emoji, mic, whatever. The caller
+ * owns the action, while the component owns the input-group placement.
+ */
+declare function ChatInputAction({ align, addonClassName, className, disabled: disabledProp, size, ...props }: ChatInputActionProps): React.JSX.Element;
+type ChatInputSendProps = Omit<React.ComponentProps<typeof Button>, "disabled" | "type"> & {
+  disabled?: boolean;
+};
+/** Submit button. Disabled while empty — there is nothing to send. */
+declare function ChatInputSend({ className, disabled: disabledProp, "aria-label": ariaLabel, size, variant, ...props }: ChatInputSendProps): React.JSX.Element;
+//#endregion
+export { Chat, ChatBody, ChatBodyBar, type ChatBodyBarProps, type ChatBodyProps, ChatDateDivider, type ChatDateDividerProps, ChatDateSection, type ChatDateSectionProps, ChatFooter, type ChatFooterProps, ChatHeader, ChatHeaderAction, type ChatHeaderActionProps, ChatHeaderActions, type ChatHeaderActionsProps, ChatHeaderDescription, type ChatHeaderDescriptionProps, ChatHeaderIdentity, type ChatHeaderIdentityProps, type ChatHeaderProps, ChatHeaderText, type ChatHeaderTextProps, ChatHeaderTitle, type ChatHeaderTitleProps, ChatInput, ChatInputAction, type ChatInputActionProps, ChatInputAttach, type ChatInputAttachItem, type ChatInputAttachKind, type ChatInputAttachProps, ChatInputField, type ChatInputFieldProps, type ChatInputProps, ChatInputSend, type ChatInputSendProps, type ChatProps, defaultChatInputAttachItems, useChatBody };