@giddaa-housing/ui 3.0.1 → 3.2.0

package/dist/table.js

@@ -16,7 +16,7 @@ function getPinnedDividerClassName(pinnedSide) {
 function Table({ className, containerClassName, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "table-container",
-		className: cn("relative w-full overflow-x-auto rounded-2xl border border-line-subtle bg-canvas", containerClassName),
+		className: cn("relative isolate w-full overflow-x-auto rounded-2xl border border-line-subtle bg-canvas", containerClassName),
 		children: /* @__PURE__ */ jsx("table", {
 			"data-slot": "table",
 			className: cn("min-w-full caption-bottom", className),
@@ -79,7 +79,7 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, pinnedSide, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("relative h-14 px-6 py-4 text-left align-middle bg-surface-raised", "text-gdt-sm font-semibold text-fg-secondary", "break-words has-[[role=checkbox]]:pr-0", getPinnedDividerClassName(pinnedSide), className),
+		className: cn("relative h-14 px-6 py-4 text-left align-middle bg-surface-raised first:rounded-tl-2xl last:rounded-tr-2xl", "text-gdt-sm font-semibold text-fg-secondary", "break-words has-[[role=checkbox]]:pr-0", getPinnedDividerClassName(pinnedSide), className),
 		...props
 	});
 }

package/dist/tabs.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 { ComponentPropsWithoutRef } from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/tabs.d.ts

package/dist/tag.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 { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
 //#region src/tag.d.ts
 declare const tagVariants: (props?: ({

package/dist/tag.js

@@ -1,7 +1,7 @@
 "use client";
+import { X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { useComponentSize } from "./size-context.js";
-import { X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/tag.tsx

package/dist/testimonial-block.js

@@ -1,8 +1,8 @@
 "use client";
+import { ArrowUpRight, Play, Star } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { buttonVariants } from "./button.js";
-import { ArrowUpRight, Play, Star } 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/theme-switcher.d.ts

@@ -0,0 +1,31 @@
+import { DropdownMenuTrigger } from "./dropdown-menu.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/theme-switcher.d.ts
+type ThemeSwitcherValue = "light" | "dark" | "system";
+type ThemeSwitcherOption = {
+  value: ThemeSwitcherValue;
+  label: string;
+  icon?: React.ReactNode;
+};
+declare const themeSwitcherVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const defaultThemeSwitcherOptions: readonly ThemeSwitcherOption[];
+type ThemeSwitcherProps = Omit<React.ComponentProps<typeof DropdownMenuTrigger>, "children"> & VariantProps<typeof themeSwitcherVariants> & {
+  /** The selected theme. Pass this with `onValueChange` for controlled use. */
+  value?: ThemeSwitcherValue;
+  /** The initial theme when the switcher is uncontrolled. */
+  defaultValue?: ThemeSwitcherValue;
+  /** Called when a theme is selected. Applying the theme remains app-owned. */
+  onValueChange?: (value: ThemeSwitcherValue) => void;
+  /** Available modes, in menu order. Defaults to Light, Dark, and System. */
+  options?: readonly ThemeSwitcherOption[];
+  showIcon?: boolean;
+  showLabel?: boolean;
+  /** Accessible label used when the visible theme label is hidden. */
+  "aria-label"?: string;
+};
+declare function ThemeSwitcher({ className, size, value, defaultValue, onValueChange, options, showIcon, showLabel, "aria-label": ariaLabel, ...props }: ThemeSwitcherProps): React.JSX.Element;
+//#endregion
+export { ThemeSwitcher, type ThemeSwitcherOption, type ThemeSwitcherProps, type ThemeSwitcherValue, defaultThemeSwitcherOptions, themeSwitcherVariants };

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,43 @@
+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 +73,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 +135,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.d.ts

@@ -0,0 +1,100 @@
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+//#region src/top-navbar.d.ts
+type TopNavbarRootProps = React.ComponentProps<"header">;
+declare function TopNavbarRoot({ className, children, ...props }: TopNavbarRootProps): React.JSX.Element;
+declare function TopNavbarContainer({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function TopNavbarLeading({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function TopNavbarBrand({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TopNavbarNavigation({ className, ...props }: NavigationMenu.Root.Props): React.JSX.Element;
+declare function TopNavbarList({ className, ...props }: NavigationMenu.List.Props): React.JSX.Element;
+declare function TopNavbarItem(props: NavigationMenu.Item.Props): React.JSX.Element;
+type TopNavbarTriggerProps = NavigationMenu.Trigger.Props & {
+  active?: boolean;
+};
+declare function TopNavbarTrigger({ active, className, children, ...props }: TopNavbarTriggerProps): React.JSX.Element;
+type TopNavbarLinkProps = NavigationMenu.Link.Props & {
+  active?: boolean;
+};
+declare function TopNavbarLink({ active, className, ...props }: TopNavbarLinkProps): React.JSX.Element;
+declare function TopNavbarContent({ className, ...props }: NavigationMenu.Content.Props): React.JSX.Element;
+declare function TopNavbarMenuGrid({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+type TopNavbarMenuLinkProps = NavigationMenu.Link.Props & {
+  featured?: boolean;
+  showArrow?: boolean;
+};
+declare function TopNavbarMenuLink({ featured, showArrow, className, children, ...props }: TopNavbarMenuLinkProps): React.JSX.Element;
+declare function TopNavbarMenuIcon({ featured, className, ...props }: React.ComponentProps<"span"> & {
+  featured?: boolean;
+}): React.JSX.Element;
+declare function TopNavbarMenuText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function TopNavbarMenuTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function TopNavbarMenuDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+type TopNavbarViewportProps = Omit<NavigationMenu.Popup.Props, "className"> & {
+  className?: string;
+  portalProps?: NavigationMenu.Portal.Props;
+  positionerProps?: Omit<NavigationMenu.Positioner.Props, "className"> & {
+    className?: string;
+  };
+  viewportProps?: Omit<NavigationMenu.Viewport.Props, "className"> & {
+    className?: string;
+  };
+};
+declare function TopNavbarViewport({ className, children, portalProps, positionerProps, viewportProps, ...props }: TopNavbarViewportProps): React.JSX.Element;
+declare function TopNavbarActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function TopNavbarActionGroup({ className, surface, ...props }: React.ComponentProps<"div"> & {
+  surface?: boolean;
+}): React.JSX.Element;
+declare function TopNavbarActionLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type TopNavbarMenuItem = {
+  title: string;
+  description?: string;
+  href: string;
+  icon?: React.ReactNode;
+  featured?: boolean;
+  render?: React.ReactElement;
+};
+type TopNavbarItemData = {
+  label: string;
+  href: string;
+  active?: boolean;
+  icon?: React.ReactNode;
+  menu?: readonly TopNavbarMenuItem[];
+  render?: React.ReactElement;
+};
+type TopNavbarProps = Omit<TopNavbarRootProps, "children"> & {
+  brand: React.ReactNode;
+  brandHref?: string;
+  brandLabel?: string;
+  brandRender?: React.ReactElement;
+  items: readonly TopNavbarItemData[];
+  actions?: React.ReactNode;
+  mobileActions?: React.ReactNode;
+  mobileMenuLabel?: string;
+};
+declare function TopNavbarComponent({ brand, brandHref, brandLabel, brandRender, items, actions, mobileActions, mobileMenuLabel, ...props }: TopNavbarProps): React.JSX.Element;
+declare const TopNavbar: typeof TopNavbarComponent & {
+  Root: typeof TopNavbarRoot;
+  Container: typeof TopNavbarContainer;
+  Leading: typeof TopNavbarLeading;
+  Brand: typeof TopNavbarBrand;
+  Navigation: typeof TopNavbarNavigation;
+  List: typeof TopNavbarList;
+  Item: typeof TopNavbarItem;
+  Trigger: typeof TopNavbarTrigger;
+  Link: typeof TopNavbarLink;
+  Content: typeof TopNavbarContent;
+  MenuGrid: typeof TopNavbarMenuGrid;
+  MenuLink: typeof TopNavbarMenuLink;
+  MenuIcon: typeof TopNavbarMenuIcon;
+  MenuText: typeof TopNavbarMenuText;
+  MenuTitle: typeof TopNavbarMenuTitle;
+  MenuDescription: typeof TopNavbarMenuDescription;
+  Viewport: typeof TopNavbarViewport;
+  Actions: typeof TopNavbarActions;
+  ActionGroup: typeof TopNavbarActionGroup;
+  ActionLink: typeof TopNavbarActionLink;
+};
+//#endregion
+export { TopNavbar, TopNavbarActionGroup, TopNavbarActionLink, TopNavbarActions, TopNavbarBrand, TopNavbarContainer, TopNavbarContent, TopNavbarItem, type TopNavbarItemData, TopNavbarLeading, TopNavbarLink, TopNavbarList, TopNavbarMenuDescription, TopNavbarMenuGrid, TopNavbarMenuIcon, type TopNavbarMenuItem, TopNavbarMenuLink, TopNavbarMenuText, TopNavbarMenuTitle, TopNavbarNavigation, type TopNavbarProps, TopNavbarRoot, type TopNavbarRootProps, TopNavbarTrigger, TopNavbarViewport };