@giddaa-housing/ui 3.0.1 → 3.2.0

package/dist/infinite-scroll.js

@@ -1,6 +1,6 @@
 "use client";
+import { Loader2 } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { Loader2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 //#region src/lib/use-intersection.ts

package/dist/input-group.js

@@ -1,14 +1,14 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
-import { InputSizeProvider } from "./input-size-context.js";
+import { InputSizeProvider, useInputComponentSize } from "./input-size-context.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/input-group.tsx
-const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 items-center rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-caption-placeholder focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[[data-slot][aria-invalid=true]]:focus-within:border-line-danger has-[[data-slot][aria-invalid=true]]:focus-within:inset-ring-line-danger has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3", {
+const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 items-center overflow-hidden rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-caption-placeholder focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[[data-slot][aria-invalid=true]]:focus-within:border-line-danger has-[[data-slot][aria-invalid=true]]:focus-within:inset-ring-line-danger has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3", {
 	variants: { size: {
 		sm: "h-8",
 		md: "h-10",
@@ -18,8 +18,7 @@ const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 i
 	defaultVariants: { size: "md" }
 });
 function InputGroup({ className, size, ...props }) {
-	const inheritedSize = useComponentSize();
-	const resolvedSize = size ?? inheritedSize;
+	const resolvedSize = useInputComponentSize(size);
 	return /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize === "xl" ? void 0 : resolvedSize,
 		children: /* @__PURE__ */ jsx(InputSizeProvider, {

package/dist/input-otp.js

@@ -1,7 +1,7 @@
 "use client";
+import { Minus } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { InputSizeProvider, useInputComponentSize } from "./input-size-context.js";
-import { MinusIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { OTPField } from "@base-ui/react/otp-field";
@@ -49,7 +49,7 @@ function InputOTPSeparator({ children, className, ...props }) {
 		"data-slot": "input-otp-separator",
 		className: cn("flex items-center justify-center px-1 text-fg-secondary [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(MinusIcon, {})
+		children: children ?? /* @__PURE__ */ jsx(Minus, {})
 	});
 }
 //#endregion

package/dist/input-size-context.js

@@ -1,4 +1,5 @@
 "use client";
+import { useInheritedComponentSize } from "./size-context.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 //#region src/input-size-context.tsx
@@ -11,8 +12,9 @@ function InputSizeProvider({ children, size }) {
 	});
 }
 function useInputComponentSize(size, fallback = "md") {
-	const inheritedSize = useContext(InputSizeContext);
-	return size ?? inheritedSize ?? fallback;
+	const inheritedInputSize = useContext(InputSizeContext);
+	const inheritedComponentSize = useInheritedComponentSize();
+	return size ?? inheritedInputSize ?? inheritedComponentSize ?? fallback;
 }
 //#endregion
 export { InputSizeProvider, useInputComponentSize };

package/dist/input.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger", {
+const inputVariants = cva("flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger autofill:border-line autofill:bg-canvas autofill:[-webkit-text-fill-color:var(--color-fg-primary)] autofill:[box-shadow:0_0_0_1000px_var(--color-canvas)_inset]", {
 	variants: { size: {
 		sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
 		md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",

package/dist/kpi-card.js

@@ -1,7 +1,7 @@
 "use client";
+import { ArrowDown, ArrowUp, ArrowUpRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Skeleton } from "./skeleton.js";
-import { ArrowDown, ArrowUp, ArrowUpRight } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/line-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
 import { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { Area, AreaChart as AreaChart$1, CartesianGrid, Line, LineChart as LineChart$1, XAxis, YAxis } from "recharts";

package/dist/mask-input.d.ts

@@ -0,0 +1,61 @@
+import { t as Input } from "./input-CfoEJ8A6.js";
+import * as React from "react";
+//#region src/mask-input.d.ts
+type MaskToken = {
+  pattern: RegExp;
+  transform?: (char: string) => string;
+};
+declare const defaultTokens: Record<string, MaskToken>;
+declare const maskPresets: {
+  creditCard: string;
+  cvc: string;
+  date: string;
+  phoneNg: string;
+  time: string;
+};
+type MaskPreset = keyof typeof maskPresets;
+type MaskInputOptions = {
+  allowNegative?: boolean;
+  currency?: string;
+  decimalScale?: number;
+  fixedDecimalScale?: boolean;
+  locale?: string;
+  mask?: string;
+  max?: number;
+  min?: number;
+  numeric?: boolean;
+  preset?: MaskPreset;
+  prefix?: string;
+  suffix?: string;
+  thousandSeparator?: boolean;
+  tokens?: Record<string, MaskToken>;
+};
+type MaskedValue = {
+  /** What the input displays: affixes, separators and all. */
+  masked: string;
+  /** The characters the user owns — token characters, or a plain number string. */
+  unmasked: string;
+  /** `unmasked` parsed, or `null` while it isn't a finished number. */
+  number: number | null;
+  /** Parallel to `masked`: true where the character came from `unmasked`. */
+  editable: boolean[];
+};
+/**
+ * Format a value exactly as `MaskInput` would — useful for rendering the same
+ * amounts outside an input (table cells, summaries) without duplicating rules.
+ */
+declare function formatMaskValue(input: string | number, options?: MaskInputOptions): MaskedValue;
+type MaskInputProps = Omit<React.ComponentProps<typeof Input>, "value" | "defaultValue" | "onChange" | "prefix" | "min" | "max"> & MaskInputOptions & {
+  /** Controlled value. Accepts either the masked or the unmasked form. */
+  value?: string | number;
+  /** Uncontrolled initial value. */
+  defaultValue?: string | number;
+  /** Reject a keystroke by returning `false`. Runs on every proposed change with the partial value, so allow in-progress input. */
+  validate?: (value: MaskedValue) => boolean;
+  /** Fires whenever the value changes, with the display and raw forms. */
+  onValueChange?: (value: MaskedValue) => void;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+};
+declare function MaskInput({ allowNegative, currency, decimalScale, defaultValue, fixedDecimalScale, inputMode, locale, mask, max, min, numeric, onBlur, onChange, onClick, onKeyDown, onValueChange, preset, prefix, ref, suffix, thousandSeparator, tokens, validate, value, ...props }: MaskInputProps): React.JSX.Element;
+//#endregion
+export { MaskInput, type MaskInputOptions, type MaskInputProps, type MaskPreset, type MaskToken, type MaskedValue, formatMaskValue, defaultTokens as maskInputTokens, maskPresets };

package/dist/match.js

@@ -1,7 +1,7 @@
 "use client";
+import { ChevronDown } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { CircularProgress } from "./progress.js";
-import { ChevronDown } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/match.tsx

package/dist/media-gallery-hero.js

@@ -1,10 +1,10 @@
 "use client";
+import { Play } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { buttonVariants } from "./button.js";
 import { Carousel, CarouselContent, CarouselItem, useCarousel } from "./carousel.js";
 import { GalleryIndicator } from "./gallery-indicator.js";
 import { ReviewBlock } from "./review-block.js";
-import { Play } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/media-gallery-hero.tsx

package/dist/media-player.js

@@ -1,8 +1,8 @@
 "use client";
+import { Captions, CaptionsOff, Maximize, Minimize, Pause, PictureInPicture2, Play, RefreshCcw, Repeat2, RotateCcw, RotateCw, Settings, TriangleAlert, Volume1, Volume2, VolumeX } from "./icons.js";
 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, 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";
 import { Slider } from "@base-ui/react/slider";
@@ -20,6 +20,9 @@ const DEFAULT_PLAYBACK_RATES = [
 ];
 const CONTROLS_HIDE_DELAY = 2500;
 const SEEK_PREVIEW_WIDTH = 160;
+const SEEK_CHAPTER_GAP = 3;
+const SEEK_THUMB_SIZE = 14;
+const SEEK_THUMB_INSET = SEEK_THUMB_SIZE / 2;
 const MediaPlayerContext = React.createContext({
 	onMenuOpenChange: () => {},
 	portalContainer: null,
@@ -73,11 +76,8 @@ function clamp(value, min, max) {
 }
 function getSeekValueFromPointer(event, min, max) {
 	const rect = event.currentTarget.getBoundingClientRect();
-	const percent = clamp((event.clientX - rect.left) / rect.width, 0, 1);
-	return {
-		percent: percent * 100,
-		value: min + percent * (max - min)
-	};
+	const travel = Math.max(rect.width - SEEK_THUMB_SIZE, 1);
+	return min + clamp((event.clientX - rect.left - SEEK_THUMB_INSET) / travel, 0, 1) * (max - min);
 }
 function MediaPlayer({ mediaStore, ...props }) {
 	const audio = props.audio ?? (hasAudioChild(props.children) ? true : void 0);
@@ -272,7 +272,7 @@ function MediaPlayerVideo({ className, ref, ...props }) {
 			setRef(ref, node);
 		}, [ref]),
 		"data-slot": "media-player-video",
-		className: cn("block aspect-video size-full object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
+		className: cn("block aspect-video size-full rounded-[inherit] object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
 		playsInline: true,
 		...props
 	});
@@ -646,24 +646,28 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 			detail: void 0
 		});
 	};
+	const toFraction = (value) => canSeek ? (clamp(value, min, max) - min) / (max - min) : 0;
+	const toTrackOffset = (fraction) => {
+		if (fraction <= 0) return "0px";
+		if (fraction >= 1) return "100%";
+		return `calc(${SEEK_THUMB_INSET}px + ${fraction} * (100% - ${SEEK_THUMB_SIZE}px))`;
+	};
 	const previewValue = dragValue ?? hoverValue;
-	const previewPercent = previewValue !== null && canSeek ? (clamp(previewValue, min, max) - min) / (max - min) * 100 : 0;
 	const previewChapter = previewValue !== null ? chapterCues?.find((cue) => previewValue >= cue.startTime && previewValue < cue.endTime) : void 0;
 	const previewCoordValues = previewCoords?.map(Number);
 	const hasSpriteCoords = previewCoordValues?.length === 4 && (previewCoordValues[2] ?? 0) > 0;
 	const previewScale = hasSpriteCoords ? SEEK_PREVIEW_WIDTH / (previewCoordValues?.[2] ?? 1) : 1;
 	const previewClampPx = previewImage ? 84 : 32;
 	const controlRect = withTime && previewValue !== null ? controlRef.current?.getBoundingClientRect() : void 0;
-	const previewLeft = controlRect ? clamp(controlRect.left + previewPercent / 100 * controlRect.width, controlRect.left + previewClampPx, controlRect.right - previewClampPx) : 0;
-	const segmentBounds = canSeek ? [
-		min,
-		...(chapterCues ?? []).map((cue) => cue.startTime).filter((time) => time > min && time < max).sort((a, b) => a - b),
-		max
-	] : [0, 1];
-	const segments = segmentBounds.slice(0, -1).map((start, index) => ({
-		start,
-		end: segmentBounds[index + 1] ?? start
-	}));
+	const previewLeft = controlRect ? clamp(controlRect.left + SEEK_THUMB_INSET + toFraction(previewValue ?? 0) * (controlRect.width - SEEK_THUMB_SIZE), controlRect.left + previewClampPx, controlRect.right - previewClampPx) : 0;
+	const playedFraction = toFraction(displayTime);
+	const chapterStops = canSeek ? (chapterCues ?? []).map((cue) => toFraction(cue.startTime)).filter((fraction) => fraction > 0 && fraction < 1).sort((a, b) => a - b).map(toTrackOffset) : [];
+	const trackMask = chapterStops.length ? `linear-gradient(to right, #000 0, ${chapterStops.flatMap((offset) => [
+		`#000 calc(${offset} - ${SEEK_CHAPTER_GAP / 2}px)`,
+		`transparent calc(${offset} - ${SEEK_CHAPTER_GAP / 2}px)`,
+		`transparent calc(${offset} + ${SEEK_CHAPTER_GAP / 2}px)`,
+		`#000 calc(${offset} + ${SEEK_CHAPTER_GAP / 2}px)`
+	]).join(", ")}, #000 100%)` : void 0;
 	return /* @__PURE__ */ jsxs(Slider.Root, {
 		thumbAlignment: "edge",
 		"data-slot": "media-player-seek",
@@ -735,45 +739,52 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 			]
 		}), portalContainer ?? document.body), /* @__PURE__ */ jsxs(Slider.Control, {
 			ref: controlRef,
-			className: "flex h-8 w-full items-center",
+			className: "relative flex h-8 w-full items-center",
 			onPointerLeave: () => {
 				if (dragValue === null) clearPreview();
 			},
 			onPointerMove: (event) => {
 				if (resolvedDisabled || dragValue !== null) return;
 				const next = getSeekValueFromPointer(event, min, max);
-				setHoverValue(next.value);
-				previewAt(next.value);
+				setHoverValue(next);
+				previewAt(next);
 			},
-			children: [/* @__PURE__ */ jsx(Slider.Track, {
-				className: "relative flex h-2 w-full items-center gap-[3px]",
-				children: segments.map(({ start, end }) => {
-					const span = end - start || 1;
-					const fraction = (value) => clamp((clamp(value, start, end) - start) / span, 0, 1);
-					const playedWidth = fraction(displayTime) * 100;
-					return /* @__PURE__ */ jsxs("span", {
-						"data-slot": "media-player-seek-segment",
-						className: "relative h-full overflow-hidden rounded-full bg-line-subtle/65",
-						style: { width: `${span / (max - min || 1) * 100}%` },
-						children: [canSeek && buffered?.map(([bufferStart, bufferEnd]) => bufferEnd > start && bufferStart < end ? /* @__PURE__ */ jsx("span", {
-							"data-slot": "media-player-seek-buffered",
-							className: "absolute inset-y-0 bg-fg-on-brand/25",
-							style: {
-								left: `${fraction(bufferStart) * 100}%`,
-								width: `${(fraction(bufferEnd) - fraction(bufferStart)) * 100}%`
-							}
-						}, `${bufferStart}-${bufferEnd}`) : null), /* @__PURE__ */ jsx("span", {
-							"data-slot": "media-player-seek-progress",
-							"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);
-				})
+			children: [/* @__PURE__ */ jsxs(Slider.Track, {
+				className: "relative h-2 w-full overflow-hidden rounded-full bg-line-subtle/65",
+				style: trackMask ? {
+					maskImage: trackMask,
+					WebkitMaskImage: trackMask
+				} : void 0,
+				children: [
+					canSeek && buffered?.map(([bufferStart, bufferEnd]) => /* @__PURE__ */ jsx("span", {
+						"data-slot": "media-player-seek-buffered",
+						className: "absolute inset-y-0 bg-fg-on-brand/25",
+						style: {
+							left: toTrackOffset(toFraction(bufferStart)),
+							right: `calc(100% - ${toTrackOffset(toFraction(bufferEnd))})`
+						}
+					}, `${bufferStart}-${bufferEnd}`)),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "media-player-seek-progress",
+						className: "absolute inset-y-0 left-0 bg-surface-brand",
+						style: { width: SEEK_THUMB_INSET }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "media-player-seek-progress",
+						"data-dragging": dragValue !== null || void 0,
+						className: "absolute inset-y-0 origin-left bg-surface-brand transition-transform duration-200 ease-linear data-[dragging=true]:transition-none",
+						style: {
+							left: SEEK_THUMB_INSET,
+							transform: `scaleX(${playedFraction})`,
+							width: `calc(100% - ${SEEK_THUMB_SIZE}px)`
+						}
+					})
+				]
 			}), /* @__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-[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))]")
+				className: cn("group/seek-thumb size-[14px] rounded-full outline-none", "transition-[inset-inline-start] duration-200 ease-linear data-[dragging]:transition-none"),
+				children: /* @__PURE__ */ jsx("span", { className: cn("block size-full rounded-full border-2 border-surface-brand bg-surface-overlay shadow-2", "transition-[scale] duration-[var(--duration-motion-press)] ease-gdt-out group-data-[dragging]/seek-thumb:scale-125 motion-reduce:group-data-[dragging]/seek-thumb:scale-100", "group-has-[:focus-visible]/seek-thumb:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]") })
 			})]
 		})]
 	});
@@ -888,7 +899,7 @@ function MediaPlayerError({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "media-player-error",
 		role: "alert",
-		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 bg-canvas/85 px-6 text-center text-fg-primary backdrop-blur-sm rounded-2xl", className),
+		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-[inherit] bg-canvas/85 px-6 text-center text-fg-primary backdrop-blur-sm", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(TriangleAlert, {

package/dist/message.js

@@ -1,6 +1,6 @@
 "use client";
+import { CheckCheck } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { CheckCheck } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/mobile-sidebar.d.ts

@@ -0,0 +1,57 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./sheet.js";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+//#region src/mobile-sidebar.d.ts
+type MobileSidebarRootProps = React.ComponentProps<typeof Sheet>;
+declare function MobileSidebarRoot(props: MobileSidebarRootProps): React.JSX.Element;
+declare function MobileSidebarTrigger({ className, children, ...props }: React.ComponentProps<typeof SheetTrigger>): React.JSX.Element;
+type MobileSidebarContentProps = Omit<Extract<React.ComponentProps<typeof SheetContent>, {
+  side?: "left" | "right";
+}>, "side" | "size">;
+declare function MobileSidebarContent({ className, showCloseButton, ...props }: MobileSidebarContentProps): React.JSX.Element;
+declare function MobileSidebarHeader({ className, ...props }: React.ComponentProps<typeof SheetHeader>): React.JSX.Element;
+declare function MobileSidebarTitle({ className, ...props }: React.ComponentProps<typeof SheetTitle>): React.JSX.Element;
+declare function MobileSidebarClose({ className, children, ...props }: React.ComponentProps<typeof SheetClose>): React.JSX.Element;
+declare function MobileSidebarBody({ className, ...props }: React.ComponentProps<typeof SheetBody>): React.JSX.Element;
+declare function MobileSidebarFooter({ className, ...props }: React.ComponentProps<typeof SheetFooter>): React.JSX.Element;
+declare function MobileSidebarNav({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function MobileSidebarList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function MobileSidebarItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type MobileSidebarLinkProps = useRender.ComponentProps<"a"> & {
+  active?: boolean;
+  icon?: React.ReactNode;
+};
+declare function MobileSidebarLink({ active, icon, className, children, render, ...props }: MobileSidebarLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function MobileSidebarGroup({ className, ...props }: React.ComponentProps<typeof Collapsible>): React.JSX.Element;
+type MobileSidebarGroupTriggerProps = React.ComponentProps<typeof CollapsibleTrigger> & {
+  active?: boolean;
+  icon?: React.ReactNode;
+};
+declare function MobileSidebarGroupTrigger({ active, icon, className, children, ...props }: MobileSidebarGroupTriggerProps): React.JSX.Element;
+declare function MobileSidebarGroupPanel({ className, ...props }: React.ComponentProps<typeof CollapsibleContent>): React.JSX.Element;
+declare function MobileSidebarSubList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function MobileSidebarSubheading({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function MobileSidebarSubLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare const MobileSidebar: {
+  Root: typeof MobileSidebarRoot;
+  Trigger: typeof MobileSidebarTrigger;
+  Content: typeof MobileSidebarContent;
+  Header: typeof MobileSidebarHeader;
+  Title: typeof MobileSidebarTitle;
+  Close: typeof MobileSidebarClose;
+  Body: typeof MobileSidebarBody;
+  Footer: typeof MobileSidebarFooter;
+  Nav: typeof MobileSidebarNav;
+  List: typeof MobileSidebarList;
+  Item: typeof MobileSidebarItem;
+  Link: typeof MobileSidebarLink;
+  Group: typeof MobileSidebarGroup;
+  GroupTrigger: typeof MobileSidebarGroupTrigger;
+  GroupPanel: typeof MobileSidebarGroupPanel;
+  SubList: typeof MobileSidebarSubList;
+  Subheading: typeof MobileSidebarSubheading;
+  SubLink: typeof MobileSidebarSubLink;
+};
+//#endregion
+export { MobileSidebar, MobileSidebarBody, MobileSidebarClose, MobileSidebarContent, type MobileSidebarContentProps, MobileSidebarFooter, MobileSidebarGroup, MobileSidebarGroupPanel, MobileSidebarGroupTrigger, type MobileSidebarGroupTriggerProps, MobileSidebarHeader, MobileSidebarItem, MobileSidebarLink, type MobileSidebarLinkProps, MobileSidebarList, MobileSidebarNav, MobileSidebarRoot, type MobileSidebarRootProps, MobileSidebarSubLink, MobileSidebarSubList, MobileSidebarSubheading, MobileSidebarTitle, MobileSidebarTrigger };

package/dist/mobile-sidebar.js

@@ -0,0 +1,196 @@
+"use client";
+import { ChevronDown, Menu, X } from "./icons.js";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./sheet.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/mobile-sidebar.tsx
+function MobileSidebarRoot(props) {
+	return /* @__PURE__ */ jsx(Sheet, { ...props });
+}
+function MobileSidebarTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(SheetTrigger, {
+		"data-slot": "mobile-sidebar-trigger",
+		className: cn("inline-flex size-10 items-center justify-center rounded-lg text-fg-secondary outline-none transition-[background-color,color,translate] duration-(--duration-motion-press) ease-gdt-out hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] active:translate-y-px motion-reduce:active:translate-y-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Menu, {
+			"aria-hidden": "true",
+			className: "size-6"
+		})
+	});
+}
+function MobileSidebarContent({ className, showCloseButton = false, ...props }) {
+	return /* @__PURE__ */ jsx(SheetContent, {
+		"data-slot": "mobile-sidebar-content",
+		side: "right",
+		size: "sm",
+		showCloseButton,
+		className: cn("h-dvh w-[min(100vw,24.375rem)] rounded-none border-y-0 border-r-0 bg-canvas [--sheet-padding-x:1.25rem] [--sheet-padding-top:0.8125rem]", className),
+		...props
+	});
+}
+function MobileSidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetHeader, {
+		"data-slot": "mobile-sidebar-header",
+		className: cn("min-h-16 flex-row items-center justify-between gap-4 px-5 py-[13px]", className),
+		...props
+	});
+}
+function MobileSidebarTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetTitle, {
+		"data-slot": "mobile-sidebar-title",
+		className: cn("sr-only", className),
+		...props
+	});
+}
+function MobileSidebarClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(SheetClose, {
+		"data-slot": "mobile-sidebar-close",
+		className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-fg-primary outline-none transition-[background-color,translate] duration-(--duration-motion-press) ease-gdt-out hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] active:translate-y-px motion-reduce:active:translate-y-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": "true",
+			className: "size-5"
+		})
+	});
+}
+function MobileSidebarBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetBody, {
+		"data-slot": "mobile-sidebar-body",
+		className: cn("flex flex-col px-5 py-3", className),
+		...props
+	});
+}
+function MobileSidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetFooter, {
+		"data-slot": "mobile-sidebar-footer",
+		className: cn("flex-col items-stretch gap-3 px-5 py-4 [&>*]:w-full", className),
+		...props
+	});
+}
+function MobileSidebarNav({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "mobile-sidebar-nav",
+		className,
+		...props
+	});
+}
+function MobileSidebarList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "mobile-sidebar-list",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function MobileSidebarItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "mobile-sidebar-item",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function MobileSidebarLink({ active = false, icon, className, children, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({
+			"aria-current": active ? "page" : void 0,
+			className: cn("group/mobile-sidebar-link grid min-h-11 w-full grid-cols-1 items-center rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+			children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", {
+				className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
+				children: [icon ? /* @__PURE__ */ jsx("span", {
+					className: "flex size-5 items-center justify-center [&>svg]:size-5",
+					children: icon
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate",
+					children
+				})]
+			}) })
+		}, props),
+		render,
+		state: {
+			slot: "mobile-sidebar-link",
+			active
+		}
+	});
+}
+function MobileSidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible, {
+		"data-slot": "mobile-sidebar-group",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function MobileSidebarGroupTrigger({ active = false, icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		"data-slot": "mobile-sidebar-group-trigger",
+		"data-active": active || void 0,
+		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
+			children: [icon ? /* @__PURE__ */ jsx("span", {
+				className: "flex size-5 items-center justify-center [&>svg]:size-5",
+				children: icon
+			}) : null, /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children
+			})]
+		}), /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0 text-current transition-transform duration-(--duration-motion-press) ease-gdt-out group-data-[panel-open]/collapsible-trigger:rotate-180 motion-reduce:transition-none"
+		})]
+	});
+}
+function MobileSidebarGroupPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-slot": "mobile-sidebar-group-panel",
+		className: cn("overflow-hidden", className),
+		...props
+	});
+}
+function MobileSidebarSubList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "mobile-sidebar-sub-list",
+		className: cn("ml-8 flex flex-col pb-1", className),
+		...props
+	});
+}
+function MobileSidebarSubheading({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "mobile-sidebar-subheading",
+		className: cn("px-2 pt-1.5 text-gdt-capitalized font-semibold uppercase text-fg-brand", className),
+		...props
+	});
+}
+function MobileSidebarSubLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("block rounded-lg px-2 py-1.5 text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", className) }, props),
+		render,
+		state: { slot: "mobile-sidebar-sub-link" }
+	});
+}
+const MobileSidebar = {
+	Root: MobileSidebarRoot,
+	Trigger: MobileSidebarTrigger,
+	Content: MobileSidebarContent,
+	Header: MobileSidebarHeader,
+	Title: MobileSidebarTitle,
+	Close: MobileSidebarClose,
+	Body: MobileSidebarBody,
+	Footer: MobileSidebarFooter,
+	Nav: MobileSidebarNav,
+	List: MobileSidebarList,
+	Item: MobileSidebarItem,
+	Link: MobileSidebarLink,
+	Group: MobileSidebarGroup,
+	GroupTrigger: MobileSidebarGroupTrigger,
+	GroupPanel: MobileSidebarGroupPanel,
+	SubList: MobileSidebarSubList,
+	Subheading: MobileSidebarSubheading,
+	SubLink: MobileSidebarSubLink
+};
+//#endregion
+export { MobileSidebar, MobileSidebarBody, MobileSidebarClose, MobileSidebarContent, MobileSidebarFooter, MobileSidebarGroup, MobileSidebarGroupPanel, MobileSidebarGroupTrigger, MobileSidebarHeader, MobileSidebarItem, MobileSidebarLink, MobileSidebarList, MobileSidebarNav, MobileSidebarRoot, MobileSidebarSubLink, MobileSidebarSubList, MobileSidebarSubheading, MobileSidebarTitle, MobileSidebarTrigger };