@giddaa-housing/ui 3.1.0 → 3.3.0

package/dist/theme-switcher.js

@@ -0,0 +1,78 @@
+"use client";
+import { ChevronDown, Monitor, Moon, Sun } from "./icons.js";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/theme-switcher.tsx
+const themeSwitcherVariants = cva("group/theme-switcher inline-flex shrink-0 items-center justify-center rounded-full bg-action-tertiary font-bold text-fg-primary outline-none transition-[background-color,box-shadow,scale] duration-(--duration-motion-press) ease-gdt-out hover:bg-action-tertiary-hover active:scale-[0.97] active:bg-action-tertiary-pressed focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] data-popup-open:bg-action-tertiary-pressed motion-reduce:active:scale-100 [&_svg]:shrink-0", {
+	variants: { size: {
+		sm: "h-8 gap-1.5 px-3 text-gdt-xs [&_svg]:size-3.5",
+		md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg]:size-4",
+		lg: "h-12 gap-2.5 px-4.5 text-gdt-md [&_svg]:size-4.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const defaultThemeSwitcherOptions = [
+	{
+		value: "light",
+		label: "Light",
+		icon: /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" })
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" })
+	},
+	{
+		value: "system",
+		label: "System",
+		icon: /* @__PURE__ */ jsx(Monitor, { "aria-hidden": "true" })
+	}
+];
+function ThemeSwitcher({ className, size, value, defaultValue = "system", onValueChange, options = defaultThemeSwitcherOptions, showIcon = true, showLabel = true, "aria-label": ariaLabel, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const resolvedOptions = options.length ? options : defaultThemeSwitcherOptions;
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const requestedValue = value ?? uncontrolledValue;
+	const selectedTheme = resolvedOptions.find((option) => option.value === requestedValue) ?? resolvedOptions[0];
+	const selectedValue = selectedTheme.value;
+	function handleValueChange(nextValue) {
+		const nextTheme = nextValue;
+		if (value === void 0) setUncontrolledValue(nextTheme);
+		onValueChange?.(nextTheme);
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		size: resolvedSize,
+		children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			"data-slot": "theme-switcher",
+			className: cn(themeSwitcherVariants({ size: resolvedSize }), className),
+			"aria-label": ariaLabel ?? (!showLabel ? `Theme: ${selectedTheme.label}` : void 0),
+			...props,
+			children: [
+				showIcon && selectedTheme.icon,
+				showLabel && /* @__PURE__ */ jsx("span", { children: selectedTheme.label }),
+				/* @__PURE__ */ jsx(ChevronDown, {
+					"aria-hidden": "true",
+					className: "text-fg-secondary transition-transform duration-(--duration-motion-popup) group-data-[popup-open]/theme-switcher:rotate-180 motion-reduce:transition-none"
+				})
+			]
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			className: "w-auto min-w-36",
+			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: selectedValue,
+				onValueChange: handleValueChange,
+				children: resolvedOptions.map(({ value: optionValue, label, icon }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: optionValue,
+					closeOnClick: true,
+					children: [icon, label]
+				}, optionValue))
+			})
+		})]
+	});
+}
+//#endregion
+export { ThemeSwitcher, defaultThemeSwitcherOptions, themeSwitcherVariants };

package/dist/time-picker.js

@@ -1,9 +1,9 @@
 "use client";
+import { Clock } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
 import { Popover, PopoverContent } from "./popover.js";
 import { n as PickerFooter, r as PickerTrigger, t as PICKER_COLLISION_AVOIDANCE } from "./picker-xSTzeYhc.js";
-import { ClockIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/lib/time-picker-paint.ts
@@ -264,7 +264,7 @@ function TimePicker({ value, onChange, format = "12h", disabled = false, size, p
 		open,
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsx(PickerTrigger, {
-			icon: ClockIcon,
+			icon: Clock,
 			displayValue: value ?? "",
 			placeholder,
 			disabled,

package/dist/toast.d.ts

@@ -1,21 +1,49 @@
-import { PropsWithChildren } from "react";
-import { ToastManagerAddOptions, ToastManagerUpdateOptions } from "@base-ui/react/toast";
+import { PropsWithChildren, ReactNode } from "react";
+import { ToastManagerAddOptions, ToastManagerUpdateOptions, ToastObject } from "@base-ui/react/toast";
 //#region src/toast.d.ts
 type ToastVariant = "success" | "info" | "warning" | "error" | "loading";
+type ToastRenderProps = {
+  /** The live toast object, including `id`, `title`, and `description`. */
+  toast: ToastObject<ToastData>;
+  /** Dismisses this toast, playing the usual exit transition. */
+  close: () => void;
+};
 type ToastData = {
-  type: ToastVariant;
+  type?: ToastVariant;
+  render?: (props: ToastRenderProps) => ReactNode;
+  className?: string;
+};
+/**
+ * Options for `toast.add`. `render` and `className` are lifted to the top level
+ * for convenience and stored on the toast's `data` under the hood.
+ */
+type ToastAddOptions = Omit<ToastManagerAddOptions<ToastData>, "data"> & {
+  /**
+   * Replaces the default icon/title/description layout with your own markup.
+   * The toast keeps its stacking, swipe, and timeout behavior.
+   */
+  render?: (props: ToastRenderProps) => ReactNode;
+  /** Merged into the toast surface classes — restyle padding, width, colors. */
+  className?: string;
+  data?: ToastData;
 };
 declare const toastManager: import("@base-ui/react").ToastManager<any>;
-declare const toast: ((options: ToastManagerAddOptions<ToastData>) => string) & {
-  success: (options: ToastManagerAddOptions<ToastData>) => string;
-  info: (options: ToastManagerAddOptions<ToastData>) => string;
-  warning: (options: ToastManagerAddOptions<ToastData>) => string;
-  error: (options: ToastManagerAddOptions<ToastData>) => string;
-  loading: (options: ToastManagerAddOptions<ToastData>) => string;
+declare function addToast({ render, className, data, ...options }: ToastAddOptions): string;
+declare const toast: ((options: ToastAddOptions) => string) & {
+  /**
+   * Adds a toast without a preset variant. Pass `render` to take over the
+   * toast body entirely, or just `title`/`description` for the stock layout.
+   */
+  add: typeof addToast;
+  success: ({ data, ...options }: ToastAddOptions) => string;
+  info: ({ data, ...options }: ToastAddOptions) => string;
+  warning: ({ data, ...options }: ToastAddOptions) => string;
+  error: ({ data, ...options }: ToastAddOptions) => string;
+  loading: ({ data, ...options }: ToastAddOptions) => string;
   dismiss: (toastId?: string | number) => void;
   update: (toastId: string | number, options: ToastManagerUpdateOptions<ToastData>) => void;
   promise: <Value, T extends any = any>(promiseValue: Promise<Value>, options: import("@base-ui/react").ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 };
 declare function ToastProvider({ children }: PropsWithChildren): import("react").JSX.Element;
 //#endregion
-export { ToastProvider, toast, toastManager };
+export { type ToastAddOptions, type ToastData, ToastProvider, type ToastRenderProps, type ToastVariant, toast, toastManager };

package/dist/toast.js

@@ -1,48 +1,44 @@
+"use client";
+import { Check, Info, X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button } from "./button.js";
-import { Check, Info, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
 //#region src/toast.tsx
 const DEFAULT_TOAST_SIDE = "top";
 const DEFAULT_TOAST_ALIGN = "end";
 const toastManager = Toast.createToastManager();
-const toast = Object.assign((options) => toastManager.add(options), {
-	success: (options) => toastManager.add({
+function addToast({ render, className, data, ...options }) {
+	return toastManager.add({
 		...options,
 		data: {
-			type: "success",
-			...options.data
+			...data,
+			render,
+			className
 		}
-	}),
-	info: (options) => toastManager.add({
-		...options,
-		data: {
-			type: "info",
-			...options.data
-		}
-	}),
-	warning: (options) => toastManager.add({
-		...options,
-		data: {
-			type: "warning",
-			...options.data
-		}
-	}),
-	error: (options) => toastManager.add({
-		...options,
-		data: {
-			type: "error",
-			...options.data
-		}
-	}),
-	loading: (options) => toastManager.add({
+	});
+}
+/** Presets the variant while leaving every `toast.add` option available. */
+function addVariant(type) {
+	return ({ data, ...options }) => addToast({
 		...options,
 		data: {
-			type: "loading",
-			...options.data
+			type,
+			...data
 		}
-	}),
+	});
+}
+const toast = Object.assign((options) => addToast(options), {
+	/**
+	* Adds a toast without a preset variant. Pass `render` to take over the
+	* toast body entirely, or just `title`/`description` for the stock layout.
+	*/
+	add: addToast,
+	success: addVariant("success"),
+	info: addVariant("info"),
+	warning: addVariant("warning"),
+	error: addVariant("error"),
+	loading: addVariant("loading"),
 	dismiss: (toastId) => toastManager.close(toastId?.toString()),
 	update: (toastId, options) => toastManager.update(toastId.toString(), options),
 	promise: toastManager.promise
@@ -78,32 +74,39 @@ function ToastList() {
 		stack.domIndex += 1;
 		if (item.transitionStatus !== "ending") stack.visibleIndex += 1;
 		placementStacks.set(placement.key, stack);
+		const render = item.data?.render;
 		return /* @__PURE__ */ jsx(Toast.Root, {
 			toast: item,
-			className: cn(toastRootBaseClassName, getToastPositionClassName(placement), getToastStackClassName(placement), getToastExitClassName(placement.side)),
+			className: cn(toastRootBaseClassName, getToastPositionClassName(placement), getToastStackClassName(placement), getToastExitClassName(placement.side), item.data?.className),
 			swipeDirection: getSwipeDirections(item),
 			style,
-			children: /* @__PURE__ */ jsxs(Toast.Content, {
-				className: "grid grid-cols-[16px_minmax(0,1fr)_24px] items-start gap-3 overflow-hidden px-2.5 py-3.5 pl-3 transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100",
-				children: [
-					/* @__PURE__ */ jsx(ToastIcon, { type: item.data?.type }),
-					/* @__PURE__ */ jsxs("div", {
-						className: "min-w-0 flex flex-col gap-1.5",
-						children: [
-							item.title ? /* @__PURE__ */ jsx(Toast.Title, { className: "text-gdt-sm font-semibold text-fg-primary" }) : null,
-							item.description ? /* @__PURE__ */ jsx(Toast.Description, { className: "text-gdt-sm text-fg-secondary" }) : null,
-							/* @__PURE__ */ jsx(Toast.Action, { className: cn("cursor-pointer border-0 bg-transparent p-0 font-inherit text-gdt-sm font-semibold inline-flex w-fit items-center hover:underline underline-offset-2", item.data?.type === "success" && "text-fg-brand", item.data?.type === "info" && "text-fg-primary", item.data?.type === "warning" && "text-fg-accent", item.data?.type === "error" && "text-fg-danger") })
-						]
-					}),
-					/* @__PURE__ */ jsx(Toast.Close, {
-						render: /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							size: "icon-xs"
+			children: /* @__PURE__ */ jsx(Toast.Content, {
+				className: toastContentClassName,
+				children: render ? render({
+					toast: item,
+					close: () => toastManager.close(item.id)
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[16px_minmax(0,1fr)_24px] items-start gap-3 overflow-hidden px-2.5 py-3.5 pl-3",
+					children: [
+						/* @__PURE__ */ jsx(ToastIcon, { type: item.data?.type }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex flex-col gap-1.5",
+							children: [
+								item.title ? /* @__PURE__ */ jsx(Toast.Title, { className: "text-gdt-sm font-semibold text-fg-primary" }) : null,
+								item.description ? /* @__PURE__ */ jsx(Toast.Description, { className: "text-gdt-sm text-fg-secondary" }) : null,
+								/* @__PURE__ */ jsx(Toast.Action, { className: cn("cursor-pointer border-0 bg-transparent p-0 font-inherit text-gdt-sm font-semibold inline-flex w-fit items-center hover:underline underline-offset-2", item.data?.type === "success" && "text-fg-brand", item.data?.type === "info" && "text-fg-primary", item.data?.type === "warning" && "text-fg-accent", item.data?.type === "error" && "text-fg-danger") })
+							]
 						}),
-						"aria-label": "Close toast",
-						children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-					})
-				]
+						/* @__PURE__ */ jsx(Toast.Close, {
+							render: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon-xs"
+							}),
+							"aria-label": "Close toast",
+							children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+						})
+					]
+				})
 			})
 		}, item.id);
 	});
@@ -133,6 +136,7 @@ function ToastIcon({ type }) {
 		]
 	});
 }
+const toastContentClassName = "transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100";
 const toastRootBaseClassName = "[--gap:12px] [--peek:12px] [--anchor-x:0px] [--anchor-y:0px] [--scale:calc(max(0,1-(var(--toast-placement-index)*0.04)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-placement-frontmost-height,var(--toast-height))] absolute z-[calc(1000-var(--toast-placement-index))] h-[var(--height)] min-h-[var(--height)] w-[min(335px,calc(100vw-32px))] overflow-visible rounded-lg border border-line bg-surface-overlay text-fg-primary shadow-[var(--elevation-e2-shadow)] pointer-events-auto select-none [transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--collapsed-y))_scale(var(--scale))] [transition:transform_var(--duration-motion-surface)_var(--ease-gdt-out),opacity_var(--duration-motion-surface)_var(--ease-gdt-out)] motion-reduce:[transition:opacity_var(--duration-motion-surface)_var(--ease-gdt-out)] data-swiping:transition-none after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:pointer-events-auto after:content-[''] data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(var(--expanded-y))_scale(1)] data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:opacity-0 data-[limited]:opacity-0 [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateX(var(--exit-x))_translateY(var(--exit-y))_scale(var(--scale))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)-150%))_scale(1)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)))_translateY(calc(var(--anchor-y)+var(--toast-swipe-movement-y)+150%))_scale(1)] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)-150%))_translateY(var(--expanded-y))_scale(1)] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(var(--scale))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--anchor-x)+var(--toast-swipe-movement-x,0px)+150%))_translateY(var(--expanded-y))_scale(1)]";
 function getToastPlacement(item, isRtl = false) {
 	const side = item.positionerProps?.side ?? DEFAULT_TOAST_SIDE;

package/dist/top-navbar.js

@@ -1,7 +1,7 @@
 "use client";
+import { ArrowUpRight, ChevronDown } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { MobileSidebar } from "./mobile-sidebar.js";
-import { ArrowUpRightIcon, ChevronDownIcon } 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";
@@ -68,7 +68,7 @@ function TopNavbarTrigger({ active = false, className, children, ...props }) {
 		...props,
 		children: [children, /* @__PURE__ */ jsx(NavigationMenu.Icon, {
 			className: "transition-transform duration-(--duration-motion-press) ease-gdt-out data-popup-open:rotate-180 motion-reduce:transition-none",
-			children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+			children: /* @__PURE__ */ jsx(ChevronDown, {
 				"aria-hidden": "true",
 				className: "size-3.5"
 			})
@@ -103,7 +103,7 @@ function TopNavbarMenuLink({ featured = false, showArrow = true, className, chil
 		"data-featured": featured || void 0,
 		className: cn("group/top-navbar-card grid min-h-22 grid-cols-[auto_1fr_auto] items-start gap-3 rounded-xl p-3 text-left outline-none transition-[background-color,color,box-shadow,translate] duration-(--duration-motion-press) ease-gdt-out hover:bg-surface focus-visible:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] active:translate-y-px motion-reduce:active:translate-y-0", featured && "bg-surface-brand-subtle", className),
 		...props,
-		children: [children, showArrow ? /* @__PURE__ */ jsx(ArrowUpRightIcon, {
+		children: [children, showArrow ? /* @__PURE__ */ jsx(ArrowUpRight, {
 			"aria-hidden": "true",
 			className: "mt-1 size-4 text-fg-caption-placeholder transition-[color,translate] duration-(--duration-motion-press) ease-gdt-out group-hover/top-navbar-card:translate-x-0.5 group-hover/top-navbar-card:-translate-y-0.5 group-hover/top-navbar-card:text-fg-brand motion-reduce:transition-colors"
 		}) : null]

package/dist/video-player-dialog.d.ts

@@ -0,0 +1,57 @@
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "./dialog.js";
+import * as React from "react";
+//#region src/video-player-dialog.d.ts
+type VideoPlayerDialogTheme = "light" | "dark";
+type VideoPlayerDialogSize = "sm" | "md" | "lg";
+declare const videoPlayerDialogSurfaceVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+  theme?: "dark" | "light" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type VideoPlayerDialogProps = React.ComponentProps<typeof Dialog>;
+/** Accessible modal root. Product state and media behavior remain consumer-owned. */
+declare function VideoPlayerDialog(props: VideoPlayerDialogProps): React.JSX.Element;
+type VideoPlayerDialogTriggerProps = React.ComponentProps<typeof DialogTrigger>;
+declare function VideoPlayerDialogTrigger(props: VideoPlayerDialogTriggerProps): React.JSX.Element;
+interface VideoPlayerDialogContentProps extends Omit<React.ComponentProps<typeof DialogContent>, "size"> {
+  size?: VideoPlayerDialogSize;
+  theme?: VideoPlayerDialogTheme;
+  surfaceClassName?: string;
+}
+/**
+ * Translation-free centered popup with one large, viewport-bounded scroll
+ * surface. The close button remains outside the scrolling surface.
+ */
+declare function VideoPlayerDialogContent({ size, theme, showCloseButton, className, surfaceClassName, children, ...props }: VideoPlayerDialogContentProps): React.JSX.Element;
+type VideoPlayerDialogMediaProps = React.ComponentProps<"div">;
+/**
+ * Aspect-ratio media slot. Compose any `MediaPlayer*` primitives inside; this
+ * part only owns placement and clipping, never playback behavior or controls.
+ */
+declare function VideoPlayerDialogMedia({ className, ...props }: VideoPlayerDialogMediaProps): React.JSX.Element;
+type VideoPlayerDialogDetailsProps = React.ComponentProps<"div">;
+declare function VideoPlayerDialogDetails({ className, ...props }: VideoPlayerDialogDetailsProps): React.JSX.Element;
+type VideoPlayerDialogTitleProps = React.ComponentProps<typeof DialogTitle>;
+declare function VideoPlayerDialogTitle({ className, ...props }: VideoPlayerDialogTitleProps): React.JSX.Element;
+type VideoPlayerDialogDescriptionProps = React.ComponentProps<typeof DialogDescription>;
+declare function VideoPlayerDialogDescription({ className, ...props }: VideoPlayerDialogDescriptionProps): React.JSX.Element;
+interface VideoPlayerDialogPlaylistIndicatorProps extends React.ComponentProps<"span"> {
+  current: number;
+  total: number;
+}
+declare function VideoPlayerDialogPlaylistIndicator({ current, total, className, ...props }: VideoPlayerDialogPlaylistIndicatorProps): React.JSX.Element;
+type VideoPlayerDialogPlaylistProps = React.ComponentProps<"section">;
+declare function VideoPlayerDialogPlaylist({ className, ...props }: VideoPlayerDialogPlaylistProps): React.JSX.Element;
+type VideoPlayerDialogPlaylistHeaderProps = React.ComponentProps<"h3">;
+declare function VideoPlayerDialogPlaylistHeader({ className, ...props }: VideoPlayerDialogPlaylistHeaderProps): React.JSX.Element;
+type VideoPlayerDialogPlaylistListProps = React.ComponentProps<"ul">;
+declare function VideoPlayerDialogPlaylistList({ className, ...props }: VideoPlayerDialogPlaylistListProps): React.JSX.Element;
+interface VideoPlayerDialogPlaylistItemProps extends Omit<React.ComponentProps<"button">, "title"> {
+  active?: boolean;
+  index?: number;
+  poster?: string;
+  title: React.ReactNode;
+  duration?: React.ReactNode;
+}
+declare function VideoPlayerDialogPlaylistItem({ active, index, poster, title, duration, className, ...props }: VideoPlayerDialogPlaylistItemProps): React.JSX.Element;
+//#endregion
+export { VideoPlayerDialog, VideoPlayerDialogContent, type VideoPlayerDialogContentProps, VideoPlayerDialogDescription, type VideoPlayerDialogDescriptionProps, VideoPlayerDialogDetails, type VideoPlayerDialogDetailsProps, VideoPlayerDialogMedia, type VideoPlayerDialogMediaProps, VideoPlayerDialogPlaylist, VideoPlayerDialogPlaylistHeader, type VideoPlayerDialogPlaylistHeaderProps, VideoPlayerDialogPlaylistIndicator, type VideoPlayerDialogPlaylistIndicatorProps, VideoPlayerDialogPlaylistItem, type VideoPlayerDialogPlaylistItemProps, VideoPlayerDialogPlaylistList, type VideoPlayerDialogPlaylistListProps, type VideoPlayerDialogPlaylistProps, type VideoPlayerDialogProps, type VideoPlayerDialogSize, type VideoPlayerDialogTheme, VideoPlayerDialogTitle, type VideoPlayerDialogTitleProps, VideoPlayerDialogTrigger, type VideoPlayerDialogTriggerProps, videoPlayerDialogSurfaceVariants };

package/dist/video-player-dialog.js

@@ -0,0 +1,188 @@
+"use client";
+import { ListVideo } from "./icons.js";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "./dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/video-player-dialog.tsx
+const WIDTHS = {
+	sm: "max-w-[584px]",
+	md: "max-w-[752px]",
+	lg: "max-w-[920px]"
+};
+const videoPlayerDialogSurfaceVariants = cva("group/video-dialog w-full border bg-surface-overlay shadow-[0_0_8px_2px_rgb(23_48_22/0.06)]", {
+	variants: {
+		size: {
+			sm: "rounded-[14px]",
+			md: "rounded-2xl",
+			lg: "rounded-[20px]"
+		},
+		theme: {
+			light: "border-line-subtle",
+			dark: "dark border-transparent bg-[#2c3329] text-[#ecf2ea]"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		theme: "light"
+	}
+});
+const VideoPlayerDialogContext = React.createContext(null);
+function useVideoPlayerDialogContext() {
+	const context = React.useContext(VideoPlayerDialogContext);
+	if (!context) throw new Error("VideoPlayerDialog parts must be rendered inside <VideoPlayerDialogContent>.");
+	return context;
+}
+/** Accessible modal root. Product state and media behavior remain consumer-owned. */
+function VideoPlayerDialog(props) {
+	return /* @__PURE__ */ jsx(Dialog, { ...props });
+}
+function VideoPlayerDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+}
+/**
+* Translation-free centered popup with one large, viewport-bounded scroll
+* surface. The close button remains outside the scrolling surface.
+*/
+function VideoPlayerDialogContent({ size = "md", theme = "light", showCloseButton = true, className, surfaceClassName, children, ...props }) {
+	const context = React.useMemo(() => ({
+		size,
+		theme
+	}), [size, theme]);
+	return /* @__PURE__ */ jsx(DialogContent, {
+		showCloseButton,
+		"data-size": size,
+		"data-slot": "video-player-dialog-content",
+		"data-theme": theme,
+		className: cn("inset-0 m-auto h-fit max-h-none translate-x-0 translate-y-0 gap-0 overflow-visible border-0 bg-transparent p-0 shadow-none sm:w-full [--dialog-padding:0px]", WIDTHS[size], className),
+		...props,
+		children: /* @__PURE__ */ jsx(VideoPlayerDialogContext.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "video-player-dialog-surface",
+				className: cn("max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain", videoPlayerDialogSurfaceVariants({
+					size,
+					theme
+				}), surfaceClassName),
+				children
+			})
+		})
+	});
+}
+/**
+* Aspect-ratio media slot. Compose any `MediaPlayer*` primitives inside; this
+* part only owns placement and clipping, never playback behavior or controls.
+*/
+function VideoPlayerDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "video-player-dialog-media",
+		className: cn("relative isolate aspect-video w-full overflow-hidden rounded-t-[inherit] bg-[#11160f]", "[&>[data-slot=media-player]]:size-full [&>[data-slot=media-player]]:rounded-none [&>[data-slot=media-player]]:shadow-none", className),
+		...props
+	});
+}
+function VideoPlayerDialogDetails({ className, ...props }) {
+	const { size } = useVideoPlayerDialogContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "video-player-dialog-details",
+		className: cn("flex flex-col", size === "sm" ? "gap-1 p-3" : size === "lg" ? "gap-1.5 px-5 pt-[18px] pb-5" : "gap-1 px-4 pt-3.5 pb-4", className),
+		...props
+	});
+}
+function VideoPlayerDialogTitle({ className, ...props }) {
+	const { size } = useVideoPlayerDialogContext();
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		"data-slot": "video-player-dialog-title",
+		className: cn("text-fg-primary", size === "sm" ? "text-gdt-lg font-bold" : size === "lg" ? "text-gdt-h4 font-extrabold" : "text-gdt-h5 font-extrabold", className),
+		...props
+	});
+}
+function VideoPlayerDialogDescription({ className, ...props }) {
+	const { size } = useVideoPlayerDialogContext();
+	return /* @__PURE__ */ jsx(DialogDescription, {
+		"data-slot": "video-player-dialog-description",
+		className: cn("text-fg-secondary", size === "sm" ? "text-gdt-xs" : size === "lg" ? "text-gdt-md" : "text-gdt-sm", className),
+		...props
+	});
+}
+function VideoPlayerDialogPlaylistIndicator({ current, total, className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "video-player-dialog-playlist-indicator",
+		className: cn("pointer-events-none absolute top-3 right-3 z-20 inline-flex h-9 items-center gap-2 rounded-full bg-black/40 px-3 text-gdt-xs font-bold whitespace-nowrap text-white shadow-[0_0_4px_rgb(0_0_0/0.1)] backdrop-blur-[15px]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ListVideo, {
+				"aria-hidden": "true",
+				className: "size-4"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				children: [
+					current,
+					" / ",
+					total
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [
+					"Video ",
+					current,
+					" of ",
+					total
+				]
+			})
+		]
+	});
+}
+function VideoPlayerDialogPlaylist({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "video-player-dialog-playlist",
+		className: cn("border-t border-line-subtle px-3 py-3 sm:px-4", className),
+		...props
+	});
+}
+function VideoPlayerDialogPlaylistHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "video-player-dialog-playlist-header",
+		className: cn("mb-2 px-2 text-gdt-xs font-semibold text-fg-secondary", className),
+		...props
+	});
+}
+function VideoPlayerDialogPlaylistList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "video-player-dialog-playlist-list",
+		className: cn("space-y-1", className),
+		...props
+	});
+}
+function VideoPlayerDialogPlaylistItem({ active = false, index, poster, title, duration, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-current": active ? "true" : void 0,
+		"data-slot": "video-player-dialog-playlist-item",
+		className: cn("flex w-full items-center gap-3 rounded-lg p-2 text-left outline-none transition-[background-color,transform] hover:bg-surface-raised focus-visible:ring-2 focus-visible:ring-line-focus active:scale-[0.99] aria-current:bg-surface-brand-subtle", className),
+		...props,
+		children: [
+			index !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "w-5 shrink-0 text-center text-gdt-xs font-semibold text-fg-caption-placeholder",
+				children: index
+			}) : null,
+			poster ? /* @__PURE__ */ jsx("img", {
+				src: poster,
+				alt: "",
+				className: "aspect-video w-20 shrink-0 rounded-md object-cover"
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-gdt-sm font-bold text-fg-primary",
+				children: title
+			}),
+			duration ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-gdt-xs tabular-nums text-fg-secondary",
+				children: duration
+			}) : null
+		]
+	}) });
+}
+//#endregion
+export { VideoPlayerDialog, VideoPlayerDialogContent, VideoPlayerDialogDescription, VideoPlayerDialogDetails, VideoPlayerDialogMedia, VideoPlayerDialogPlaylist, VideoPlayerDialogPlaylistHeader, VideoPlayerDialogPlaylistIndicator, VideoPlayerDialogPlaylistItem, VideoPlayerDialogPlaylistList, VideoPlayerDialogTitle, VideoPlayerDialogTrigger, videoPlayerDialogSurfaceVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -165,6 +165,10 @@
       "types": "./dist/heatmap-chart.d.ts",
       "import": "./dist/heatmap-chart.js"
     },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
+    },
     "./infotip": {
       "types": "./dist/infotip.d.ts",
       "import": "./dist/infotip.js"
@@ -229,6 +233,10 @@
       "types": "./dist/media-player.d.ts",
       "import": "./dist/media-player.js"
     },
+    "./video-player-dialog": {
+      "types": "./dist/video-player-dialog.d.ts",
+      "import": "./dist/video-player-dialog.js"
+    },
     "./message": {
       "types": "./dist/message.d.ts",
       "import": "./dist/message.js"
@@ -309,6 +317,10 @@
       "types": "./dist/scatter-chart.d.ts",
       "import": "./dist/scatter-chart.js"
     },
+    "./scroll-spy": {
+      "types": "./dist/scroll-spy.d.ts",
+      "import": "./dist/scroll-spy.js"
+    },
     "./search-input": {
       "types": "./dist/search-input.d.ts",
       "import": "./dist/search-input.js"
@@ -377,6 +389,10 @@
       "types": "./dist/testimonial-block.d.ts",
       "import": "./dist/testimonial-block.js"
     },
+    "./theme-switcher": {
+      "types": "./dist/theme-switcher.d.ts",
+      "import": "./dist/theme-switcher.js"
+    },
     "./time-picker": {
       "types": "./dist/time-picker.d.ts",
       "import": "./dist/time-picker.js"
@@ -423,7 +439,6 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "libphonenumber-js": "^1.12.43",
-    "lucide-react": "^0.545.0",
     "media-chrome": "^4.19.2",
     "react-day-picker": "^9.14.0",
     "react-phone-number-input": "^3.4.16",