@giddaa-housing/ui 1.2.0 → 2.0.0

package/dist/file-upload.d.ts

@@ -0,0 +1,43 @@
+import { CircularProgressProps, ProgressProps } from "./progress.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/file-upload.d.ts
+type FileUploadState = "pending" | "uploading" | "complete" | "error";
+type FileUploadContextValue = {
+  state: FileUploadState;
+  value: number;
+};
+declare function useFileUpload(): FileUploadContextValue;
+type FileUploadProps = ComponentProps<"div"> & {
+  state?: FileUploadState;
+  value: number;
+};
+declare function FileUpload({ className, state, value, "aria-busy": ariaBusy, ...props }: FileUploadProps): import("react").JSX.Element;
+declare function FileUploadPreview({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadImage({ className, alt, ...props }: ComponentProps<"img">): import("react").JSX.Element;
+declare function FileUploadOverlay({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadPreviewAction({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadIcon({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadName({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function FileUploadMeta({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+type FileUploadStatusProps = Omit<ComponentProps<"output">, "children"> & {
+  children?: ReactNode | ((context: FileUploadContextValue) => ReactNode);
+  pendingLabel?: ReactNode;
+  uploadingLabel?: ReactNode;
+  completeLabel?: ReactNode;
+  errorLabel?: ReactNode;
+};
+declare function FileUploadStatus({ className, children, pendingLabel, uploadingLabel, completeLabel, errorLabel, ...props }: FileUploadStatusProps): import("react").JSX.Element;
+type FileUploadProgressProps = Omit<ProgressProps, "value"> & {
+  showValue?: boolean;
+};
+declare function FileUploadProgress({ className, children, showValue, "aria-label": ariaLabel, ...props }: FileUploadProgressProps): import("react").JSX.Element;
+type FileUploadCircularProgressProps = Omit<CircularProgressProps, "value">;
+declare function FileUploadCircularProgress({ className, labelOverlay, "aria-label": ariaLabel, ...props }: FileUploadCircularProgressProps): import("react").JSX.Element;
+type FileUploadCancelProps = ComponentProps<"button"> & {
+  variant?: "ghost" | "surface";
+};
+declare function FileUploadCancel({ className, type, children, variant, "aria-label": ariaLabel, ...props }: FileUploadCancelProps): import("react").JSX.Element;
+//#endregion
+export { FileUpload, FileUploadCancel, type FileUploadCancelProps, FileUploadCircularProgress, type FileUploadCircularProgressProps, FileUploadContent, type FileUploadContextValue, FileUploadHeader, FileUploadIcon, FileUploadImage, FileUploadMeta, FileUploadName, FileUploadOverlay, FileUploadPreview, FileUploadPreviewAction, FileUploadProgress, type FileUploadProgressProps, type FileUploadProps, type FileUploadState, FileUploadStatus, type FileUploadStatusProps, useFileUpload };

package/dist/file-upload.js

@@ -0,0 +1,154 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { CircularProgress, Progress, ProgressValue } from "./progress.js";
+import { File, X } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/file-upload.tsx
+const FileUploadContext = createContext(null);
+function normalizeProgress(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(100, Math.max(0, Math.round(value)));
+}
+function useFileUpload() {
+	const context = useContext(FileUploadContext);
+	if (!context) throw new Error("FileUpload compound components must be rendered inside <FileUpload>.");
+	return context;
+}
+function FileUpload({ className, state = "uploading", value, "aria-busy": ariaBusy, ...props }) {
+	const progress = normalizeProgress(value);
+	return /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+		value: {
+			state,
+			value: progress
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "file-upload",
+			"data-state": state,
+			"data-value": progress,
+			"aria-busy": ariaBusy ?? (state === "uploading" || void 0),
+			className: cn("group/file-upload relative flex min-w-0 items-start gap-3 rounded-xl border border-line bg-surface p-3", "data-[state=error]:border-line-danger data-[state=error]:bg-surface-danger-subtle", className),
+			...props
+		})
+	});
+}
+function FileUploadPreview({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-preview",
+		className: cn("relative flex size-20 shrink-0 items-center justify-center rounded-lg bg-surface-raised", className),
+		...props
+	});
+}
+function FileUploadImage({ className, alt = "", ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		"data-slot": "file-upload-image",
+		className: cn("size-full rounded-[inherit] object-cover", className),
+		alt,
+		...props
+	});
+}
+function FileUploadOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-overlay",
+		className: cn("absolute inset-0 flex items-center justify-center rounded-[inherit] bg-black/45", className),
+		...props
+	});
+}
+function FileUploadPreviewAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-preview-action",
+		className: cn("absolute -top-2 -right-2 z-10", className),
+		...props
+	});
+}
+function FileUploadIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-icon",
+		className: cn("flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface-brand-subtle text-fg-brand", "group-data-[state=error]/file-upload:bg-surface-danger-subtle group-data-[state=error]/file-upload:text-status-danger", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(File, {
+			"aria-hidden": "true",
+			className: "size-5"
+		})
+	});
+}
+function FileUploadContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-content",
+		className: cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+function FileUploadHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-header",
+		className: cn("flex min-w-0 items-center gap-2", className),
+		...props
+	});
+}
+function FileUploadName({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "file-upload-name",
+		className: cn("min-w-0 flex-1 truncate text-gdt-sm font-semibold leading-snug text-fg-primary", className),
+		...props
+	});
+}
+function FileUploadMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "file-upload-meta",
+		className: cn("mt-0.5 text-gdt-xs leading-snug text-fg-secondary", className),
+		...props
+	});
+}
+function FileUploadStatus({ className, children, pendingLabel = "Waiting to upload", uploadingLabel, completeLabel = "Upload complete", errorLabel = "Upload failed", ...props }) {
+	const context = useFileUpload();
+	const defaultLabels = {
+		pending: pendingLabel,
+		uploading: uploadingLabel ?? `${context.value}% uploaded`,
+		complete: completeLabel,
+		error: errorLabel
+	};
+	const content = typeof children === "function" ? children(context) : children ?? defaultLabels[context.state];
+	return /* @__PURE__ */ jsx("output", {
+		"data-slot": "file-upload-status",
+		"aria-live": "polite",
+		className: cn("text-gdt-xs leading-snug text-fg-secondary", "group-data-[state=complete]/file-upload:text-status-success group-data-[state=error]/file-upload:text-status-danger", className),
+		...props,
+		children: content
+	});
+}
+function FileUploadProgress({ className, children, showValue = true, "aria-label": ariaLabel = "Upload progress", ...props }) {
+	const { state, value } = useFileUpload();
+	return /* @__PURE__ */ jsx(Progress, {
+		value,
+		"aria-label": ariaLabel,
+		className: cn("mt-2", state === "complete" && "[&_[data-slot=progress-indicator]]:bg-status-success", state === "error" && "[&_[data-slot=progress-indicator]]:bg-status-danger", className),
+		...props,
+		children: children ?? (showValue ? /* @__PURE__ */ jsx(ProgressValue, {}) : null)
+	});
+}
+function FileUploadCircularProgress({ className, labelOverlay = true, "aria-label": ariaLabel = "Upload progress", ...props }) {
+	const { state, value } = useFileUpload();
+	return /* @__PURE__ */ jsx(CircularProgress, {
+		value,
+		labelOverlay,
+		"aria-label": ariaLabel,
+		className: cn("text-white [&_circle:first-child]:text-white/35 [&_circle:last-child]:text-white", state === "complete" && "[&_circle:last-child]:text-status-success", state === "error" && "[&_circle:last-child]:text-status-danger", className),
+		...props
+	});
+}
+function FileUploadCancel({ className, type = "button", children, variant = "ghost", "aria-label": ariaLabel = "Cancel upload", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "file-upload-cancel",
+		type,
+		"aria-label": ariaLabel,
+		className: cn("inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent bg-transparent p-0 text-fg-secondary", "transition-[background-color,border-color,color,box-shadow] hover:bg-surface-raised hover:text-fg-primary focus-visible:border-line-focus focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50", variant === "surface" && "border-line bg-surface-overlay shadow-sm hover:bg-surface-raised", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+}
+//#endregion
+export { FileUpload, FileUploadCancel, FileUploadCircularProgress, FileUploadContent, FileUploadHeader, FileUploadIcon, FileUploadImage, FileUploadMeta, FileUploadName, FileUploadOverlay, FileUploadPreview, FileUploadPreviewAction, FileUploadProgress, FileUploadStatus, useFileUpload };

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/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 };