@giddaa-housing/ui 1.2.0 → 2.1.0

package/dist/infinite-scroll.js

@@ -0,0 +1,125 @@
+"use client";
+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
+function useIntersection(options) {
+	const [entry, setEntry] = useState(null);
+	const observer = useRef(null);
+	return {
+		ref: useCallback((element) => {
+			if (observer.current) {
+				observer.current.disconnect();
+				observer.current = null;
+			}
+			if (element === null) {
+				setEntry(null);
+				return;
+			}
+			if (typeof IntersectionObserver === "undefined") {
+				setEntry(null);
+				return;
+			}
+			observer.current = new IntersectionObserver(([_entry]) => {
+				setEntry(_entry ?? null);
+			}, options);
+			observer.current.observe(element);
+		}, [options]),
+		entry
+	};
+}
+//#endregion
+//#region src/infinite-scroll.tsx
+const InfiniteScrollContext = createContext(null);
+function useInfiniteScrollContext(consumer) {
+	const context = useContext(InfiniteScrollContext);
+	if (!context) throw new Error(`${consumer} must be used within <InfiniteScroll>`);
+	return context;
+}
+function useInfiniteScrollSentinel({ hasNextPage, isFetchingNextPage, fetchNextPage, rootMargin = "200px" }) {
+	const { ref, entry } = useIntersection(useMemo(() => ({ rootMargin }), [rootMargin]));
+	useEffect(() => {
+		if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
+	}, [
+		entry?.isIntersecting,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	]);
+	return ref;
+}
+function InfiniteScroll({ children, isLoading, isEmpty, error, hasNextPage, isFetchingNextPage, fetchNextPage }) {
+	const value = useMemo(() => ({
+		isLoading,
+		isEmpty,
+		error,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	}), [
+		isLoading,
+		isEmpty,
+		error,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	]);
+	return /* @__PURE__ */ jsx(InfiniteScrollContext.Provider, {
+		value,
+		children
+	});
+}
+function DefaultLoader({ label }) {
+	return /* @__PURE__ */ jsxs("output", {
+		"aria-live": "polite",
+		className: "flex items-center justify-center gap-2 px-4 py-6 text-fg-secondary text-gdt-sm",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }), /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+function InfiniteScrollLoading({ children }) {
+	const { isLoading, isFetchingNextPage } = useInfiniteScrollContext("InfiniteScrollLoading");
+	if (!isLoading && !isFetchingNextPage) return null;
+	return children ?? /* @__PURE__ */ jsx(DefaultLoader, { label: isFetchingNextPage ? "Loading more..." : "Loading..." });
+}
+function InfiniteScrollContent({ children }) {
+	const { isLoading, isEmpty } = useInfiniteScrollContext("InfiniteScrollContent");
+	if (isLoading || isEmpty) return null;
+	return children;
+}
+function InfiniteScrollEmpty({ children }) {
+	const { isLoading, isEmpty, error } = useInfiniteScrollContext("InfiniteScrollEmpty");
+	if (isLoading || error || !isEmpty) return null;
+	return children;
+}
+function InfiniteScrollError({ children }) {
+	const { error } = useInfiniteScrollContext("InfiniteScrollError");
+	if (!error) return null;
+	return children ?? /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		className: "px-4 py-4 text-center text-fg-danger text-gdt-sm",
+		children: error.message || "Something went wrong while loading more items."
+	});
+}
+function InfiniteScrollEnd({ children }) {
+	const { isLoading, isEmpty, hasNextPage, error } = useInfiniteScrollContext("InfiniteScrollEnd");
+	if (isLoading || isEmpty || hasNextPage || error) return null;
+	return children;
+}
+function InfiniteScrollSentinel({ rootMargin, className }) {
+	const { hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteScrollContext("InfiniteScrollSentinel");
+	const ref = useInfiniteScrollSentinel({
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage,
+		rootMargin
+	});
+	if (!hasNextPage) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": "true",
+		className: cn("h-px", className)
+	});
+}
+//#endregion
+export { InfiniteScroll, InfiniteScrollContent, InfiniteScrollEmpty, InfiniteScrollEnd, InfiniteScrollError, InfiniteScrollLoading, InfiniteScrollSentinel, useInfiniteScrollSentinel };

package/dist/input-otp.d.ts

@@ -0,0 +1,23 @@
+import { n as InputSize } from "./input-CfoEJ8A6.js";
+import * as React from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/input-otp.d.ts
+declare const inputOTPSlotVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputOTPProps = Omit<OTPField.Root.Props, "className"> & {
+  className?: string;
+  size?: InputSize;
+};
+declare function InputOTP({ className, size, ...props }: InputOTPProps): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type InputOTPSlotProps = Omit<OTPField.Input.Props, "className"> & {
+  className?: string;
+};
+declare function InputOTPSlot({ className, ...props }: InputOTPSlotProps): React.JSX.Element;
+type InputOTPSeparatorProps = Omit<OTPField.Separator.Props, "className"> & {
+  className?: string;
+};
+declare function InputOTPSeparator({ children, className, ...props }: InputOTPSeparatorProps): React.JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, inputOTPSlotVariants };

package/dist/input-otp.js

@@ -0,0 +1,56 @@
+"use client";
+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";
+//#region src/input-otp.tsx
+const inputOTPSlotVariants = cva("relative flex shrink-0 appearance-none items-center justify-center rounded-full border border-line bg-canvas text-center font-normal text-fg-primary caret-fg-primary outline-none transition-[background-color,border-color,box-shadow,color] placeholder:text-fg-caption-placeholder hover:border-line-strong focus:z-10 focus:border-line-focus focus:inset-ring-1 focus:inset-ring-line-focus data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:focus:border-line-danger aria-invalid:focus:inset-ring-line-danger data-invalid:border-line-danger data-invalid:text-fg-danger data-invalid:focus:border-line-danger data-invalid:focus:inset-ring-line-danger group-aria-invalid/input-otp:border-line-danger group-aria-invalid/input-otp:text-fg-danger group-aria-invalid/input-otp:focus:border-line-danger group-aria-invalid/input-otp:focus:inset-ring-line-danger", {
+	variants: { size: {
+		sm: "size-8 text-gdt-xs",
+		md: "size-10 text-gdt-sm",
+		lg: "size-12 text-gdt-md",
+		xl: "size-14 text-gdt-lg"
+	} },
+	defaultVariants: { size: "md" }
+});
+function InputOTP({ className, size, ...props }) {
+	const resolvedSize = useInputComponentSize(size);
+	return /* @__PURE__ */ jsx(InputSizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx(OTPField.Root, {
+			"data-slot": "input-otp",
+			"data-size": resolvedSize,
+			className: cn("group/input-otp flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+			...props
+		})
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		"data-size": useInputComponentSize(),
+		className: cn("flex items-center rounded-full [&>[data-slot=input-otp-slot]:first-child]:rounded-l-full [&>[data-slot=input-otp-slot]:last-child]:rounded-r-full [&>[data-slot=input-otp-slot]:not(:first-child)]:-ml-px [&>[data-slot=input-otp-slot]]:rounded-none", className),
+		...props
+	});
+}
+function InputOTPSlot({ className, ...props }) {
+	const resolvedSize = useInputComponentSize();
+	return /* @__PURE__ */ jsx(OTPField.Input, {
+		"data-slot": "input-otp-slot",
+		"data-size": resolvedSize,
+		className: cn(inputOTPSlotVariants({ size: resolvedSize }), className),
+		...props
+	});
+}
+function InputOTPSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField.Separator, {
+		"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, {})
+	});
+}
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, inputOTPSlotVariants };

package/dist/picker-xSTzeYhc.js

@@ -0,0 +1,50 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { useInputComponentSize } from "./input-size-context.js";
+import { PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/lib/picker.tsx
+const PICKER_COLLISION_AVOIDANCE = {
+	side: "flip",
+	align: "shift",
+	fallbackAxisSide: "none"
+};
+const pickerTriggerVariants = cva("flex w-full items-center justify-between rounded-full border transition-[border-color,box-shadow] outline-none", {
+	variants: { size: {
+		sm: "h-8 px-3 text-gdt-xs [&_svg]:size-3.5",
+		md: "h-10 px-3.5 text-gdt-sm [&_svg]:size-4",
+		lg: "h-12 px-4 text-gdt-md [&_svg]:size-4.5",
+		xl: "h-14 px-4.5 text-gdt-lg [&_svg]:size-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, size, className }) {
+	const resolvedSize = useInputComponentSize(size);
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		disabled,
+		"data-size": resolvedSize,
+		className: cn(pickerTriggerVariants({ size: resolvedSize }), disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", !displayValue && "text-fg-caption-placeholder"),
+			children: displayValue || placeholder
+		}), /* @__PURE__ */ jsx(Icon, { className: cn("ml-2 shrink-0", disabled ? "text-fg-caption-placeholder" : "text-fg-secondary") })]
+	});
+}
+function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between border-t border-line-subtle px-4 py-3",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "tertiary-outline",
+			size: "sm",
+			onClick: onSecondary,
+			children: secondaryLabel
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			onClick: onApply,
+			children: "Apply"
+		})]
+	});
+}
+//#endregion
+export { PickerFooter as n, PickerTrigger as r, PICKER_COLLISION_AVOIDANCE as t };

package/dist/popover.d.ts

@@ -4,11 +4,11 @@ import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/popover.d.ts
 declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
-type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
+type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset"> & {
   showArrow?: boolean;
   size?: ComponentSize;
 };
-declare function PopoverContent({ className, align, alignOffset, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
 declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
   border?: boolean;
 }): React.JSX.Element;

package/dist/popover.js

@@ -16,10 +16,11 @@ function PopoverTrigger({ ...props }) {
 		...props
 	});
 }
-function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
+function PopoverContent({ className, align = "center", alignOffset = 0, collisionAvoidance, side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		align,
 		alignOffset,
+		collisionAvoidance,
 		side,
 		sideOffset,
 		className: "isolate z-50",

package/dist/sheet.d.ts

@@ -8,6 +8,7 @@ declare function SheetClose({ ...props }: Dialog.Close.Props): React.JSX.Element
 type SheetContentProps = Dialog.Popup.Props & {
   side?: SheetSide;
   showCloseButton?: boolean;
+  showOverlay?: boolean;
 } & ({
   side: "top" | "bottom";
   size?: "fullscreen";
@@ -15,10 +16,11 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: "left" | "right";
   size?: "sm" | "md" | "lg";
 });
-declare function SheetContent({ className, children, side, size, showCloseButton, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, ...props }: SheetContentProps): React.JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
 declare function SheetDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
 //#endregion
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/sheet.js

@@ -2,16 +2,17 @@
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
+import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
 import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/sheet.tsx
 function Sheet({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
+	return /* @__PURE__ */ jsx(DialogNestingProvider, { children: /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "sheet",
 		...props
-	});
+	}) });
 }
 function SheetTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
@@ -32,13 +33,16 @@ function SheetPortal({ ...props }) {
 	});
 }
 function SheetOverlay({ className, ...props }) {
+	const nested = useDialogNestingDepth() > 1;
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		forceRender: true,
 		"data-slot": "sheet-overlay",
-		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl", className),
+		"data-nested": nested || void 0,
+		className: cn("fixed inset-0 z-50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
 		...props
 	});
 }
-const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)", {
+const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=bottom]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=top]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*1.5rem)] data-[side=left]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*1.5rem)] data-[side=right]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=bottom]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)] data-[side=top]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)]", {
 	variants: { size: {
 		sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
 		md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
@@ -47,9 +51,9 @@ const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col g
 	} },
 	defaultVariants: { size: "md" }
 });
-function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, ...props }) {
+function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, showOverlay = true, ...props }) {
 	const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
-	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
+	return /* @__PURE__ */ jsxs(SheetPortal, { children: [showOverlay && /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize === "fullscreen" ? "lg" : resolvedSize,
 		children: /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-slot": "sheet-content",
@@ -61,8 +65,8 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 				"data-slot": "sheet-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
-					className: "absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4",
-					size: "icon-sm",
+					className: "absolute z-10 size-7 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[nested-dialog-open]/sheet-content:hidden group-data-[side=bottom]/sheet-content:-top-9 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-9 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-9 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-9 group-data-[side=right]/sheet-content:top-4",
+					size: "icon-xs",
 					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",
 						children: "Close"
@@ -75,14 +79,21 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 function SheetHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-header",
-		className: cn("flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2", className),
+		className: cn("flex flex-col gap-1 px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle", className),
+		...props
+	});
+}
+function SheetBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-body",
+		className: cn("flex-1 overflow-y-auto px-(--sheet-padding-x) py-4", className),
 		...props
 	});
 }
 function SheetFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-footer",
-		className: cn("mt-auto flex items-center justify-end gap-2 border-t border-line-subtle -mx-(--sheet-padding-x) px-(--sheet-padding-x) py-4", className),
+		className: cn("mt-auto flex items-center justify-end gap-2 border-t border-line-subtle px-(--sheet-padding-x) py-4", className),
 		...props
 	});
 }
@@ -101,4 +112,4 @@ function SheetDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };