@giddaa-housing/ui 3.5.0 → 3.6.0

package/dist/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { Check, ChevronDown, ChevronUp } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider, responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -29,11 +29,11 @@ const selectTriggerVariants = cva("group/select-trigger flex w-fit min-w-0 items
 	} },
 	defaultVariants: { size: "md" }
 });
-const selectContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[align-trigger=true]:transition-none not-data-[align-trigger=true]:data-starting-style:opacity-0 not-data-[align-trigger=true]:data-starting-style:scale-95 not-data-[align-trigger=true]:data-ending-style:opacity-0 not-data-[align-trigger=true]:data-ending-style:scale-95 not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-2 not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-starting-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-ending-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:not-data-[align-trigger=true]:data-starting-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-ending-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-0", {
+const selectContentVariants = cva("relative isolate z-50 flex max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) flex-col overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[align-trigger=true]:transition-none not-data-[align-trigger=true]:data-starting-style:opacity-0 not-data-[align-trigger=true]:data-starting-style:scale-95 not-data-[align-trigger=true]:data-ending-style:opacity-0 not-data-[align-trigger=true]:data-ending-style:scale-95 not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-2 not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-starting-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-ending-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:not-data-[align-trigger=true]:data-starting-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-ending-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-0", {
 	variants: { size: {
-		sm: "rounded-lg p-1",
-		md: "rounded-xl p-1.5",
-		lg: "rounded-[18px] p-2"
+		sm: "rounded-lg",
+		md: "rounded-xl",
+		lg: "rounded-[18px]"
 	} },
 	defaultVariants: { size: "md" }
 });
@@ -45,6 +45,74 @@ const selectItemVariants = cva("group/select-item relative flex w-full cursor-po
 	} },
 	defaultVariants: { size: "md" }
 });
+const responsiveSelectTriggerSizes = {
+	base: {
+		sm: "h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+		md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+		lg: "h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+	},
+	md: {
+		sm: "md:h-8 md:gap-2 md:px-3 md:text-gdt-xs md:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "md:h-10 md:gap-2 md:px-3.5 md:text-gdt-sm md:[&_svg:not([class*='size-'])]:size-4",
+		lg: "md:h-12 md:gap-2.5 md:px-4 md:pr-5 md:text-gdt-md md:[&_svg:not([class*='size-'])]:size-4.5"
+	},
+	lg: {
+		sm: "lg:h-8 lg:gap-2 lg:px-3 lg:text-gdt-xs lg:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "lg:h-10 lg:gap-2 lg:px-3.5 lg:text-gdt-sm lg:[&_svg:not([class*='size-'])]:size-4",
+		lg: "lg:h-12 lg:gap-2.5 lg:px-4 lg:pr-5 lg:text-gdt-md lg:[&_svg:not([class*='size-'])]:size-4.5"
+	}
+};
+const responsiveSelectContentSizes = {
+	base: {
+		sm: "rounded-lg",
+		md: "rounded-xl",
+		lg: "rounded-[18px]"
+	},
+	md: {
+		sm: "md:rounded-lg",
+		md: "md:rounded-xl",
+		lg: "md:rounded-[18px]"
+	},
+	lg: {
+		sm: "lg:rounded-lg",
+		md: "lg:rounded-xl",
+		lg: "lg:rounded-[18px]"
+	}
+};
+const responsiveSelectItemSizes = {
+	base: {
+		sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs",
+		md: "gap-2 rounded-md px-4 py-2 text-gdt-sm",
+		lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md"
+	},
+	md: {
+		sm: "md:gap-1.5 md:px-3 md:py-1.5 md:text-gdt-xs",
+		md: "md:gap-2 md:px-4 md:py-2 md:text-gdt-sm",
+		lg: "md:gap-2.5 md:px-4 md:py-2.5 md:text-gdt-md"
+	},
+	lg: {
+		sm: "lg:gap-1.5 lg:px-3 lg:py-1.5 lg:text-gdt-xs",
+		md: "lg:gap-2 lg:px-4 lg:py-2 lg:text-gdt-sm",
+		lg: "lg:gap-2.5 lg:px-4 lg:py-2.5 lg:text-gdt-md"
+	}
+};
+const responsiveSelectBodySizes = {
+	base: {
+		sm: "p-1",
+		md: "p-1.5",
+		lg: "p-2"
+	},
+	md: {
+		sm: "md:p-1",
+		md: "md:p-1.5",
+		lg: "md:p-2"
+	},
+	lg: {
+		sm: "lg:p-1",
+		md: "lg:p-1.5",
+		lg: "lg:p-2"
+	}
+};
 function SelectGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Group, {
 		"data-slot": "select-group",
@@ -60,17 +128,18 @@ function SelectValue({ className, ...props }) {
 	});
 }
 function SelectTrigger({ className, children, unstyled, ...props }) {
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectTriggerSizes);
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"data-slot": "select-trigger",
-		"data-size": resolvedSize,
-		className: cn(!unstyled && selectTriggerVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(!unstyled && selectTriggerVariants({ size: null }), !unstyled && resolvedSize.className, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDown, { className: "text-line-strong transition-transform group-data-disabled/select-trigger:text-fg-caption-placeholder data-popup-open:rotate-180" }) })]
 	});
 }
-function SelectContent({ className, children, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
-	const resolvedSize = useComponentSize();
+function SelectContent({ className, children, header, footer, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectContentSizes);
+	const bodySize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectBodySizes);
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 		side,
 		sideOffset,
@@ -81,19 +150,43 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 8, a
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 			"data-slot": "select-content",
 			"data-align-trigger": alignItemWithTrigger,
-			className: cn(selectContentVariants({ size: resolvedSize }), className),
+			className: cn(selectContentVariants({ size: null }), resolvedSize.className, className),
 			...props,
 			children: [
-				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-				/* @__PURE__ */ jsx(Select$1.List, {
-					className: "space-y-0.5",
-					children
+				header,
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "select-content-body",
+					className: cn("min-h-0 flex-1 overflow-y-auto", bodySize.className),
+					children: [
+						/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+						/* @__PURE__ */ jsx(Select$1.List, {
+							className: "space-y-0.5",
+							children
+						}),
+						/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+					]
 				}),
-				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+				footer
 			]
 		})
 	}) });
 }
+function SelectHeader({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "select-header",
+		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-t-[inherit] border-line-subtle border-b bg-canvas px-3 py-2 text-left text-gdt-sm font-bold text-fg-brand outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-brand-subtle disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		...props
+	});
+}
+function SelectFooter({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "select-footer",
+		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-b-[inherit] border-line-subtle border-t bg-canvas px-3 py-2 text-left text-gdt-sm font-semibold text-fg-secondary outline-none transition-colors hover:bg-surface focus-visible:bg-surface focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-raised disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		...props
+	});
+}
 function SelectLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 		"data-slot": "select-label",
@@ -103,10 +196,10 @@ function SelectLabel({ className, ...props }) {
 }
 function SelectItem({ className, children, ...props }) {
 	const { multiple } = React.useContext(SelectSelectionContext);
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectItemSizes);
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-slot": "select-item",
-		className: cn(selectItemVariants({ size: resolvedSize }), !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand", className),
+		className: cn(selectItemVariants({ size: null }), resolvedSize.className, !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand", className),
 		...props,
 		children: [multiple ? /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 			keepMounted: true,
@@ -142,4 +235,4 @@ function SelectScrollDownButton({ className, ...props }) {
 	});
 }
 //#endregion
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectFooter, SelectGroup, SelectHeader, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/sheet.d.ts

@@ -9,6 +9,8 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: SheetSide;
   showCloseButton?: boolean;
   showOverlay?: boolean;
+  /** @internal Positions specialized popup shells without changing the surface. */
+  popupClassName?: string;
 } & ({
   side: "top" | "bottom";
   size?: "fullscreen";
@@ -16,7 +18,7 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: "left" | "right";
   size?: "sm" | "md" | "lg";
 });
-declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, popupClassName, ...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;

package/dist/sheet.js

@@ -42,7 +42,7 @@ function SheetOverlay({ className, ...props }) {
 		...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-[opacity,scale,translate] duration-[var(--duration-motion-surface)] ease-gdt-drawer 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-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 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)]", {
+const sheetContentVariants = cva("group/sheet-content pointer-events-none fixed z-50 overflow-visible transition-[opacity,scale,translate] duration-[var(--duration-motion-surface)] ease-gdt-drawer 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=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 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)]",
@@ -51,7 +51,7 @@ 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, showOverlay = true, ...props }) {
+function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, showOverlay = true, popupClassName, ...props }) {
 	const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [showOverlay && /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize === "fullscreen" ? "lg" : resolvedSize,
@@ -59,13 +59,17 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 			"data-slot": "sheet-content",
 			"data-side": side,
 			"data-size": resolvedSize,
-			className: cn(sheetContentVariants({ size: resolvedSize }), className),
+			className: cn(sheetContentVariants({ size: resolvedSize }), popupClassName),
 			...props,
-			children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "sheet-surface",
+				className: cn("pointer-events-auto flex size-full 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) group-data-[side=bottom]/sheet-content:rounded-b-none group-data-[side=top]/sheet-content:rounded-t-none group-data-[side=left]/sheet-content:rounded-l-none group-data-[side=right]/sheet-content:rounded-r-none", className),
+				children
+			}), showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
 				"data-slot": "sheet-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
-					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",
+					className: "pointer-events-auto 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(X, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",

package/dist/sidebar.d.ts

@@ -1,6 +1,6 @@
 import { Separator } from "./separator.js";
-import { t as Button } from "./button-DW5OijoR.js";
-import { t as Input } from "./input-CfoEJ8A6.js";
+import { t as Button } from "./button-BS5KCibF.js";
+import { Input } from "./input.js";
 import { TooltipContent } from "./tooltip.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";

package/dist/sidebar.js

@@ -108,6 +108,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			"data-sidebar": "sidebar",
 			"data-slot": "sidebar",
 			"data-mobile": "true",
+			popupClassName: "min-w-10/12 w-(--layout-nav-width) max-w-screen",
 			className: "min-w-10/12 w-(--layout-nav-width) max-w-screen border-none bg-surface p-0 text-fg-secondary [&>button]:hidden",
 			style: { "--layout-nav-width": SIDEBAR_WIDTH_MOBILE },
 			side: "right",

package/dist/size-context-BVhHduLi.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+//#region src/size-context.d.ts
+type ComponentSize = "sm" | "md" | "lg";
+type ResponsiveValue<T extends string> = {
+  base: T;
+  md?: T;
+  lg?: T;
+};
+type ResolvedResponsiveValue<T extends string> = Required<ResponsiveValue<T>>;
+type ResponsiveComponentSize = ResponsiveValue<ComponentSize>;
+type ComponentSizeValue = ComponentSize | ResponsiveComponentSize;
+declare function useInheritedComponentSize(): ComponentSizeValue | undefined;
+declare function SizeProvider({ children, size }: {
+  children: ReactNode;
+  size?: ComponentSizeValue | null;
+}): import("react").JSX.Element;
+declare function useComponentSize(size?: ComponentSize | null, fallback?: ComponentSize): ComponentSize;
+declare function useComponentSizeValue(size?: ComponentSizeValue | null, fallback?: ComponentSize): "lg" | "md" | "sm" | ResponsiveComponentSize;
+declare function resolveResponsiveValue<T extends string>(value: T | ResponsiveValue<T>): ResolvedResponsiveValue<T>;
+declare function resolveResponsiveComponentSize(size: ComponentSizeValue): Required<ResponsiveValue<ComponentSize>>;
+declare function responsiveValueClasses<T extends string>(value: T | ResponsiveValue<T>, classes: {
+  base: Record<T, string>;
+  md: Record<T, string>;
+  lg: Record<T, string>;
+}): {
+  base: T;
+  md: T;
+  lg: T;
+  responsive: boolean;
+  className: string;
+};
+//#endregion
+export { ResponsiveValue as a, resolveResponsiveValue as c, useComponentSizeValue as d, useInheritedComponentSize as f, ResponsiveComponentSize as i, responsiveValueClasses as l, ComponentSizeValue as n, SizeProvider as o, ResolvedResponsiveValue as r, resolveResponsiveComponentSize as s, ComponentSize as t, useComponentSize as u };

package/dist/size-context.d.ts

@@ -1,2 +1,2 @@
-import { i as useInheritedComponentSize, n as SizeProvider, r as useComponentSize, t as ComponentSize } from "./size-context-BX6kAdVj.js";
-export { type ComponentSize, SizeProvider, useComponentSize, useInheritedComponentSize };
+import { a as ResponsiveValue, c as resolveResponsiveValue, d as useComponentSizeValue, f as useInheritedComponentSize, i as ResponsiveComponentSize, l as responsiveValueClasses, n as ComponentSizeValue, o as SizeProvider, r as ResolvedResponsiveValue, s as resolveResponsiveComponentSize, t as ComponentSize, u as useComponentSize } from "./size-context-BVhHduLi.js";
+export { type ComponentSize, type ComponentSizeValue, type ResolvedResponsiveValue, type ResponsiveComponentSize, type ResponsiveValue, SizeProvider, resolveResponsiveComponentSize, resolveResponsiveValue, responsiveValueClasses, useComponentSize, useComponentSizeValue, useInheritedComponentSize };

package/dist/size-context.js

@@ -14,8 +14,37 @@ function SizeProvider({ children, size }) {
 	});
 }
 function useComponentSize(size, fallback = "md") {
+	const inheritedSize = useInheritedComponentSize();
+	const resolved = size ?? inheritedSize ?? fallback;
+	return typeof resolved === "string" ? resolved : resolved.base;
+}
+function useComponentSizeValue(size, fallback = "md") {
 	const inheritedSize = useInheritedComponentSize();
 	return size ?? inheritedSize ?? fallback;
 }
+function resolveResponsiveValue(value) {
+	if (typeof value === "string") return {
+		base: value,
+		md: value,
+		lg: value
+	};
+	const md = value.md ?? value.base;
+	return {
+		base: value.base,
+		md,
+		lg: value.lg ?? md
+	};
+}
+function resolveResponsiveComponentSize(size) {
+	return resolveResponsiveValue(size);
+}
+function responsiveValueClasses(value, classes) {
+	const resolved = resolveResponsiveValue(value);
+	return {
+		...resolved,
+		responsive: typeof value !== "string",
+		className: typeof value === "string" ? classes.base[resolved.base] : `${classes.base[resolved.base]} ${classes.md[resolved.md]} ${classes.lg[resolved.lg]}`
+	};
+}
 //#endregion
-export { SizeProvider, useComponentSize, useInheritedComponentSize };
+export { SizeProvider, resolveResponsiveComponentSize, resolveResponsiveValue, responsiveValueClasses, useComponentSize, useComponentSizeValue, useInheritedComponentSize };

package/dist/slider.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from "class-variance-authority";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 //#region src/slider.d.ts
@@ -6,8 +6,10 @@ declare const sliderVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SliderRootValue = number | readonly number[];
-type SliderSize = NonNullable<VariantProps<typeof sliderVariants>["size"]>;
-type SliderProps<Value extends SliderRootValue = SliderRootValue> = Slider$1.Root.Props<Value> & VariantProps<typeof sliderVariants>;
+type SliderSize = ComponentSizeValue;
+type SliderProps<Value extends SliderRootValue = SliderRootValue> = Slider$1.Root.Props<Value> & {
+  size?: SliderSize;
+};
 type SliderControlProps = Slider$1.Control.Props;
 type SliderTrackProps = Slider$1.Track.Props;
 type SliderIndicatorProps = Slider$1.Indicator.Props;

package/dist/slider.js

@@ -1,34 +1,49 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider, responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 //#region src/slider.tsx
+const sliderSizeVariants = {
+	sm: "[--slider-thumb-size:1rem] [--slider-track-size:0.25rem]",
+	md: "[--slider-thumb-size:1.25rem] [--slider-track-size:0.375rem]",
+	lg: "[--slider-thumb-size:1.5rem] [--slider-track-size:0.5rem]"
+};
 const sliderVariants = cva("group/slider grid w-full gap-2 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60", {
-	variants: { size: {
-		sm: "[--slider-thumb-size:1rem] [--slider-track-size:0.25rem]",
-		md: "[--slider-thumb-size:1.25rem] [--slider-track-size:0.375rem]",
-		lg: "[--slider-thumb-size:1.5rem] [--slider-track-size:0.5rem]"
-	} },
+	variants: { size: sliderSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function Slider({ className, children, size, disabled = false, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSize = responsiveValueClasses(sizeValue, responsiveSliderSizes);
 	return /* @__PURE__ */ jsx(SizeProvider, {
-		size: resolvedSize,
+		size: sizeValue,
 		children: /* @__PURE__ */ jsx(Slider$1.Root, {
 			thumbAlignment: "edge",
 			disabled,
 			"data-disabled": disabled,
-			"data-size": resolvedSize,
+			"data-size": resolvedSize.base,
 			"data-slot": "slider",
-			className: cn(sliderVariants({ size: resolvedSize }), className),
+			className: cn(sliderVariants({ size: null }), resolvedSize.className, className),
 			...props,
 			children
 		})
 	});
 }
+const responsiveSliderSizes = {
+	base: sliderSizeVariants,
+	md: {
+		sm: "md:[--slider-thumb-size:1rem] md:[--slider-track-size:0.25rem]",
+		md: "md:[--slider-thumb-size:1.25rem] md:[--slider-track-size:0.375rem]",
+		lg: "md:[--slider-thumb-size:1.5rem] md:[--slider-track-size:0.5rem]"
+	},
+	lg: {
+		sm: "lg:[--slider-thumb-size:1rem] lg:[--slider-track-size:0.25rem]",
+		md: "lg:[--slider-thumb-size:1.25rem] lg:[--slider-track-size:0.375rem]",
+		lg: "lg:[--slider-thumb-size:1.5rem] lg:[--slider-track-size:0.5rem]"
+	}
+};
 function SliderControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Control, {
 		"data-slot": "slider-control",

package/dist/sonar.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/sonar.d.ts

package/dist/sonar.js

@@ -24,7 +24,7 @@ function sameCorners(a, b) {
 * Colour rides on `currentColor` so the keyframe stays tone-agnostic: one set
 * of keyframes, one class per tone.
 */
-const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-sonar-wave", "motion-reduce:animate-none motion-reduce:opacity-40 motion-reduce:shadow-[0_0_0_2px_currentColor]"), {
+const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-sonar-wave will-change-[box-shadow,opacity] [backface-visibility:hidden] [transform:translateZ(0)]", "motion-reduce:animate-none motion-reduce:opacity-40 motion-reduce:shadow-[0_0_0_2px_currentColor]"), {
 	variants: { tone: {
 		brand: "text-fg-brand",
 		info: "text-status-info",

package/dist/sparkline.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartContainer, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/sparkline.d.ts