@giddaa-housing/ui 2.1.0 → 3.0.0

package/dist/input-group.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BZIeyUw6.js";
+import { t as Button } from "./button-DW5OijoR.js";
 import { n as InputSize } from "./input-CfoEJ8A6.js";
 import { n as TextareaSize } from "./textarea-IS_D8pXf.js";
 import { VariantProps } from "class-variance-authority";

package/dist/media-player.js

@@ -1,7 +1,7 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 import { Captions, CaptionsOff, Maximize, Minimize, Pause, PictureInPicture2, Play, RefreshCcw, Repeat2, RotateCcw, RotateCw, Settings, TriangleAlert, Volume1, Volume2, VolumeX } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
@@ -83,9 +83,13 @@ function MediaPlayer({ mediaStore, ...props }) {
 	const audio = props.audio ?? (hasAudioChild(props.children) ? true : void 0);
 	return /* @__PURE__ */ jsx(MediaProvider, {
 		mediaStore,
-		children: /* @__PURE__ */ jsx(MediaPlayerRoot, {
-			...props,
-			audio
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delay: 300,
+			timeout: 400,
+			children: /* @__PURE__ */ jsx(MediaPlayerRoot, {
+				...props,
+				audio
+			})
 		})
 	});
 }
@@ -311,7 +315,7 @@ function MediaControlButton({ className, shortcut, tooltip, ...props }) {
 	});
 	if (!tooltip) return button;
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-		delay: 300,
+		delay: void 0,
 		render: button
 	}), /* @__PURE__ */ jsxs(TooltipContent, {
 		className: "border-line-subtle px-2.5 py-1.5 text-gdt-xs font-bold",
@@ -411,6 +415,7 @@ function MediaPlayerVolume({ className, disabled, expandable = false, onClick, r
 			...props,
 			children: /* @__PURE__ */ jsx(Icon, {})
 		}), /* @__PURE__ */ jsx(Slider.Root, {
+			thumbAlignment: "edge",
 			"data-slot": "media-player-volume-slider",
 			className: cn("flex h-8 w-20 min-w-20 touch-none items-center", resolvedDisabled && "pointer-events-none opacity-45", expandable && "pointer-events-none opacity-0 transition-opacity group-hover/volume:pointer-events-auto group-hover/volume:opacity-100 group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100", rangeClassName),
 			disabled: resolvedDisabled,
@@ -660,6 +665,7 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 		end: segmentBounds[index + 1] ?? start
 	}));
 	return /* @__PURE__ */ jsxs(Slider.Root, {
+		thumbAlignment: "edge",
 		"data-slot": "media-player-seek",
 		className: cn("relative flex h-8 w-full min-w-0 touch-none items-center", resolvedDisabled && "pointer-events-none opacity-45", className),
 		disabled: resolvedDisabled,
@@ -758,15 +764,16 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 							}
 						}, `${bufferStart}-${bufferEnd}`) : null), /* @__PURE__ */ jsx("span", {
 							"data-slot": "media-player-seek-progress",
-							className: cn("absolute inset-y-0 left-0 bg-surface-brand", dragValue === null && "transition-[width] duration-200 ease-linear"),
-							style: { width: `${playedWidth}%` }
+							"data-dragging": dragValue !== null || void 0,
+							className: "absolute inset-y-0 left-0 w-full origin-left bg-surface-brand transition-transform duration-200 ease-linear data-[dragging=true]:transition-none",
+							style: { transform: `scaleX(${playedWidth / 100})` }
 						})]
 					}, start);
 				})
 			}), /* @__PURE__ */ jsx(Slider.Thumb, {
 				getAriaLabel: () => ariaLabel ?? "Media timeline",
 				getAriaValueText: (_formatted, value) => `${formatTime(value)} of ${formatTime(max)}`,
-				className: cn("size-3.5 -translate-x-1/2 rounded-full bg-surface-overlay shadow-2 ring-2 ring-surface-brand outline-none", "transition-[inset-inline-start,transform] duration-200 ease-linear data-[dragging]:scale-125 data-[dragging]:transition-transform", "focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]")
+				className: cn("size-3.5 -translate-x-1/2 rounded-full bg-surface-overlay shadow-2 ring-2 ring-surface-brand outline-none", "transition-[scale] duration-[var(--duration-motion-press)] ease-gdt-out data-[dragging]:scale-125 motion-reduce:data-[dragging]:scale-100 data-[dragging]:transition-none", "focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]")
 			})]
 		})]
 	});

package/dist/message.d.ts

@@ -0,0 +1,263 @@
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+//#region src/message.d.ts
+/**
+ * Which side of the conversation the message belongs to.
+ * Pure driver of fill, content colour, alignment, and which corner is the tail.
+ * `sent` = brand fill, aligned end, tail bottom-right.
+ * `received` = raised surface, aligned start, tail bottom-left.
+ */
+type MessageDirection = "sent" | "received";
+/** Size ladder. Swaps padding, radius, tail, gaps, and type tokens. Never structural. */
+type MessageSize = "sm" | "md" | "lg" | "xl";
+/**
+ * Delivery state. Mirrors what the API actually emits — `READ | DELIVERED | FAILED`.
+ * There is no `sent`: the API never emits one.
+ *
+ * `read` — double-tick announced as read.
+ * `delivered` — the same design-system tick, announced as delivered.
+ * `failed` — the text "Failed to send", not a tick.
+ */
+type MessageStatus = "read" | "delivered" | "failed";
+/** Styles the bubble itself — the surface inside `Message`, not `Message`'s root. */
+declare const messageVariants: (props?: ({
+  direction?: "received" | "sent" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MessageGroupProps = React.ComponentProps<"div">;
+/** Vertical stack of messages. Owns inter-message spacing only. */
+declare function MessageGroup({ className, ...props }: MessageGroupProps): React.JSX.Element;
+interface MessageProps extends React.ComponentProps<"div"> {
+  /** Conversation side — see {@link MessageDirection}. @default "sent" */
+  direction?: MessageDirection;
+  /** Size ladder — see {@link MessageSize}. @default "md" */
+  size?: MessageSize;
+  /** Render the timestamp in the meta row. @default true */
+  showTimestamp?: boolean;
+  /**
+   * Render the read receipt in the meta row.
+   * **Scope: `direction="sent"` only** — ignored entirely when received.
+   * @default true
+   */
+  showReadReceipt?: boolean;
+  /** Value for the `<time>` element. Omit to drop the timestamp regardless of `showTimestamp`. */
+  timestamp?: Date | string;
+  /** Machine-readable value for a string timestamp such as "10:12 AM". */
+  timestampDateTime?: Date | string;
+  /** Delivery state for the receipt. Ignored when received. @default "read" */
+  status?: MessageStatus;
+  /**
+   * Quiet attribution rendered below the bubble, e.g. "Asked by AI".
+   *
+   * **Scope: `direction="sent"` only** — ignored entirely when received.
+   *
+   * It sits outside the bubble rather than inside it because there is no
+   * `muted-on-brand` token: inside a sent bubble it could only be
+   * `text-fg-on-brand` at full strength, as loud as the message itself.
+   */
+  footer?: React.ReactNode;
+}
+/**
+ * The bubble shell. Owns direction, size, surface, tail corner, and the meta row.
+ * Knows nothing about content type — it reacts to whichever slots are present,
+ * so attachments drop in without changing this component.
+ *
+ * The root is a column: the bubble, then an optional footer beneath it. That
+ * split exists only so `footer` has somewhere to live outside the surface —
+ * without a footer the column collapses to the bubble alone.
+ */
+declare function Message({ direction, size, showTimestamp, showReadReceipt, timestamp, timestampDateTime, status, footer, className, children, ...props }: MessageProps): React.JSX.Element;
+type MessageFooterProps = React.ComponentProps<"div">;
+/**
+ * Quiet attribution beneath the bubble — "Answered by AI", "Edited", "Sent via
+ * SMS". Rendered by the shell from its `footer` prop; exported for callers who
+ * compose their own.
+ *
+ * It owns layout and register only. What it says, and whether that is
+ * uppercased, is the caller's — this is a slot, not a label.
+ */
+declare function MessageFooter({ className, ...props }: MessageFooterProps): React.JSX.Element;
+type MessageContentProps = useRender.ComponentProps<"div">;
+/**
+ * The content region for prose. Attachment slots are sibling alternatives.
+ * Polymorphic via `render` — pass `render={<p />}` for paragraphs.
+ */
+declare function MessageContent({ className, render, ...props }: MessageContentProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type MessageMetaProps = React.ComponentProps<"div">;
+/** The meta row (timestamp + receipt). Not rendered when both are absent. */
+declare function MessageMeta({ className, ...props }: MessageMetaProps): React.JSX.Element;
+type MessageTimestampProps = React.ComponentProps<"time">;
+/** Timestamp. Date values get an ISO `dateTime`; display strings require an explicit one. */
+declare function MessageTimestamp({ className, children, dateTime, ...props }: MessageTimestampProps): React.JSX.Element | null;
+type MessageReadReceiptProps = React.ComponentProps<"span">;
+/**
+ * Delivery state indicator. Sent-only; returns nothing when the receipt is
+ * hidden or the message is received.
+ *
+ * `failed` renders text rather than a tick, so the message is legible instead of
+ * encoded in an icon nobody recognises.
+ *
+ * The tick is 14px at every size — the design pins it across the whole ladder.
+ */
+declare function MessageReadReceipt({ className, ...props }: MessageReadReceiptProps): React.JSX.Element | null;
+type MessageMediaProps = React.ComponentProps<"div">;
+/**
+ * The media box — the content region for `image` and `video`.
+ *
+ * A direct child of `Message`, replacing `MessageContent` rather than nesting
+ * inside it: Figma's bubble is `[content, meta]` with no wrapper.
+ *
+ * Owns the fixed per-size dimensions and radius, `bg-surface-overlay`, and the
+ * clip. Reads `size` from the shell via `group-data-*` — no spine props of its own.
+ */
+declare function MessageMedia({ className, ...props }: MessageMediaProps): React.JSX.Element;
+interface MessageMediaImageProps extends Omit<useRender.ComponentProps<"img">, "alt"> {
+  /** Required — a chat photo is content, never decorative. */
+  alt: string;
+}
+/**
+ * The image itself. Fills the box and crops via `object-cover`.
+ * Polymorphic via `render` for custom loaders.
+ */
+declare function MessageMediaImage({ className, render, ...props }: MessageMediaImageProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type MessageMediaPlaceholderProps = React.ComponentProps<"div">;
+/**
+ * The reserved-slot visual — a centred, decorative icon at
+ * `text-fg-caption-placeholder`. Children are the icon.
+ */
+declare function MessageMediaPlaceholder({ className, ...props }: MessageMediaPlaceholderProps): React.JSX.Element;
+type MessageMediaPlayProps = React.ComponentProps<"button">;
+/**
+ * The play control — a centred brand circle over the media.
+ *
+ * A real `<button>`, so focus and Enter/Space work without extra wiring.
+ * Labelled "Play video" by default; pass `aria-label` to override.
+ *
+ * The icon is nudged right for optical centring.
+ */
+declare function MessageMediaPlay({ className, type, "aria-label": ariaLabel, ...props }: MessageMediaPlayProps): React.JSX.Element;
+type MessageMediaDurationProps = React.ComponentProps<"div">;
+/**
+ * The duration badge, inset from the bottom-right of the media box.
+ *
+ * Children are the already-formatted string — the app owns the value, the
+ * component owns the presentation.
+ */
+declare function MessageMediaDuration({ className, ...props }: MessageMediaDurationProps): React.JSX.Element;
+type MessageFileProps = React.ComponentProps<"div">;
+/**
+ * The file row — icon chip, filename column, download control.
+ *
+ * A direct child of `Message`, in the same slot `MessageContent`, `MessageMedia`
+ * or `MessageVoice` would occupy. Reads `size` from the shell via `group-data-*`.
+ */
+declare function MessageFile({ className, ...props }: MessageFileProps): React.JSX.Element;
+type MessageFileIconProps = React.ComponentProps<"div">;
+/**
+ * The file-type icon chip. Children are the icon.
+ *
+ * `bg-fg-on-brand` is a foreground token used as a background, for the same
+ * reason as `MessageVoicePlay`: it preserves the intended contrast in dark
+ * mode.
+ */
+declare function MessageFileIcon({ className, ...props }: MessageFileIconProps): React.JSX.Element;
+type MessageFileInfoProps = React.ComponentProps<"div">;
+/**
+ * The filename column. `min-w-0` so its children can truncate against the
+ * shell's per-size `max-w` rather than pushing the bubble wider.
+ */
+declare function MessageFileInfo({ className, ...props }: MessageFileInfoProps): React.JSX.Element;
+type MessageFileNameProps = React.ComponentProps<"p">;
+/** The filename. Follows the body type ladder, semibold. Truncates. */
+declare function MessageFileName({ className, ...props }: MessageFileNameProps): React.JSX.Element;
+type MessageFileDetailProps = React.ComponentProps<"p">;
+/**
+ * The secondary line — size and type, e.g. "248 KB · PDF". Follows the
+ * timestamp type ladder. The app formats it; the component only presents it.
+ *
+ * Received messages use secondary text; sent messages inherit on-brand text.
+ */
+declare function MessageFileDetail({ className, ...props }: MessageFileDetailProps): React.JSX.Element;
+type MessageFileActionProps = useRender.ComponentProps<"button">;
+/**
+ * The download control. Defaults to a `<button>`; pass `render={<a download />}`
+ * for a direct link. Labelled "Download file" by default.
+ */
+declare function MessageFileAction({ className, render, type, ...props }: MessageFileActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type MessageVoiceProps = React.ComponentProps<"div">;
+/**
+ * The voice-note row — play control alongside a waveform.
+ *
+ * A direct child of `Message`, in the same slot `MessageContent` or
+ * `MessageMedia` would occupy. Reads `size` from the shell via `group-data-*`.
+ */
+declare function MessageVoice({ className, ...props }: MessageVoiceProps): React.JSX.Element;
+type MessageVoicePlayProps = React.ComponentProps<"button">;
+/**
+ * The play control. A real `<button>`, so focus and Enter/Space work without
+ * extra wiring. Labelled "Play voice note" by default; pass `aria-label` to
+ * override.
+ *
+ * Direction controls the visual size and contrast treatment.
+ */
+declare function MessageVoicePlay({ className, type, "aria-label": ariaLabel, ...props }: MessageVoicePlayProps): React.JSX.Element;
+type MessageVoiceWaveformProps = React.ComponentProps<"div">;
+/**
+ * The waveform. Renders the built-in glyph unless children are supplied.
+ *
+ * Colour rides on `currentColor`, so the direction flip costs nothing.
+ */
+declare function MessageVoiceWaveform({ className, children, ...props }: MessageVoiceWaveformProps): React.JSX.Element;
+type MessageVoiceDurationProps = React.ComponentProps<"p">;
+/**
+ * The clip's length. Children are the already-formatted string — the app owns
+ * the value, the component owns the presentation.
+ *
+ * Follows the timestamp type ladder, and drops to `text-fg-primary` when
+ * received rather than inheriting the bubble's `text-fg-on-brand`.
+ */
+declare function MessageVoiceDuration({ className, ...props }: MessageVoiceDurationProps): React.JSX.Element;
+/**
+ * How the marker presents itself.
+ *
+ * `default` — a full-width row. System notices, e.g. "Adaeze joined".
+ * `pill` — a centred chip. Date dividers, e.g. "Today".
+ */
+type MarkerVariant = "default" | "pill";
+/** Variant styling for full-width notices and centred date-divider pills. */
+declare const markerVariants: (props?: ({
+  variant?: "default" | "pill" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MarkerProps extends useRender.ComponentProps<"div"> {
+  /** Presentation — see {@link MarkerVariant}. @default "default" */
+  variant?: MarkerVariant;
+  /**
+   * Size ladder, matching the bubbles it sits among. @default "md"
+   *
+   * Unlike the parts inside `Message`, this is a real prop: a marker is a
+   * sibling of messages, not a child, so there is no shell above it to read
+   * `size` from. Pass it the same value the surrounding bubbles get.
+   */
+  size?: MessageSize;
+}
+/**
+ * A break in the conversation — a date divider, an unread line, a system notice.
+ *
+ * Deliberately takes no `direction`. A marker is not from anyone; it spans the
+ * conversation. Exposing `direction` would be a prop that does nothing in every
+ * state.
+ *
+ * Takes no role by default, because the same component serves three different
+ * meanings. Use `render` to give it real semantics where they exist — e.g.
+ * `render={<h3 />}` for a date heading, or a `role="separator"` for an unread line.
+ */
+declare function Marker({ className, variant, size, render, ...props }: MarkerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type MarkerIconProps = React.ComponentProps<"span">;
+/** Decorative icon slot. Always hidden from assistive tech — the content carries the meaning. */
+declare function MarkerIcon({ className, ...props }: MarkerIconProps): React.JSX.Element;
+type MarkerContentProps = React.ComponentProps<"span">;
+/** The marker's text. Wraps in a full-width row; stays on one line inside a pill. */
+declare function MarkerContent({ className, ...props }: MarkerContentProps): React.JSX.Element;
+//#endregion
+export { Marker, MarkerContent, type MarkerContentProps, MarkerIcon, type MarkerIconProps, type MarkerProps, type MarkerVariant, Message, MessageContent, type MessageContentProps, type MessageDirection, MessageFile, MessageFileAction, type MessageFileActionProps, MessageFileDetail, type MessageFileDetailProps, MessageFileIcon, type MessageFileIconProps, MessageFileInfo, type MessageFileInfoProps, MessageFileName, type MessageFileNameProps, type MessageFileProps, MessageFooter, type MessageFooterProps, MessageGroup, type MessageGroupProps, MessageMedia, MessageMediaDuration, type MessageMediaDurationProps, MessageMediaImage, type MessageMediaImageProps, MessageMediaPlaceholder, type MessageMediaPlaceholderProps, MessageMediaPlay, type MessageMediaPlayProps, type MessageMediaProps, MessageMeta, type MessageMetaProps, type MessageProps, MessageReadReceipt, type MessageReadReceiptProps, type MessageSize, type MessageStatus, MessageTimestamp, type MessageTimestampProps, MessageVoice, MessageVoiceDuration, type MessageVoiceDurationProps, MessageVoicePlay, type MessageVoicePlayProps, type MessageVoiceProps, MessageVoiceWaveform, type MessageVoiceWaveformProps, markerVariants, messageVariants };