@giddaa-housing/ui 3.5.0 → 3.6.0

package/dist/badge.d.ts

@@ -1,3 +1,4 @@
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 //#region src/badge.d.ts
@@ -8,6 +9,9 @@ declare const badgeVariants: (props?: ({
   border?: boolean | null | undefined;
   iconOnly?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Badge({ className, variant, size, shape, border, iconOnly, render, children, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type BadgeProps = useRender.ComponentProps<"span"> & Omit<VariantProps<typeof badgeVariants>, "size"> & {
+  size?: ComponentSizeValue;
+};
+declare function Badge({ className, variant, size, shape, border, iconOnly, render, children, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { Badge, badgeVariants };

package/dist/badge.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { resolveResponsiveComponentSize, useComponentSizeValue } from "./size-context.js";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
@@ -48,25 +48,39 @@ const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center j
 		border: true
 	}
 });
+const responsiveBadgeSizeClasses = {
+	md: {
+		sm: "md:min-h-7 md:min-w-7 md:gap-1 md:px-2.5 md:py-1 md:text-gdt-xs md:[&>svg]:size-3",
+		md: "md:min-h-9 md:min-w-9 md:gap-1.5 md:px-3 md:py-1.5 md:text-gdt-sm md:[&>svg]:size-3.5",
+		lg: "md:min-h-10.5 md:min-w-10.5 md:gap-2 md:px-4 md:py-2 md:text-gdt-md md:[&>svg]:size-4"
+	},
+	lg: {
+		sm: "lg:min-h-7 lg:min-w-7 lg:gap-1 lg:px-2.5 lg:py-1 lg:text-gdt-xs lg:[&>svg]:size-3",
+		md: "lg:min-h-9 lg:min-w-9 lg:gap-1.5 lg:px-3 lg:py-1.5 lg:text-gdt-sm lg:[&>svg]:size-3.5",
+		lg: "lg:min-h-10.5 lg:min-w-10.5 lg:gap-2 lg:px-4 lg:py-2 lg:text-gdt-md lg:[&>svg]:size-4"
+	}
+};
 function Badge({ className, variant = "default", size, shape = "round", border = false, iconOnly = false, render, children, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSize = resolveResponsiveComponentSize(sizeValue);
+	const responsive = typeof sizeValue !== "string";
 	return useRender({
 		defaultTagName: "span",
 		props: mergeProps({
 			className: cn(badgeVariants({
 				variant,
-				size: resolvedSize,
+				size: resolvedSize.base,
 				shape,
 				border,
 				iconOnly
-			}), className),
+			}), responsive && responsiveBadgeSizeClasses.md[resolvedSize.md], responsive && responsiveBadgeSizeClasses.lg[resolvedSize.lg], className),
 			children
 		}, props),
 		render,
 		state: {
 			slot: "badge",
 			variant,
-			size: resolvedSize,
+			size: resolvedSize.base,
 			shape,
 			border,
 			iconOnly

package/dist/bar-chart.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 { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { Bar, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis } from "recharts";

package/dist/bullet-chart.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 * as React from "react";
 //#region src/bullet-chart.d.ts
 /**

package/dist/button-BS5KCibF.d.ts

@@ -0,0 +1,33 @@
+import { a as ResponsiveValue } from "./size-context-BVhHduLi.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import { Button } from "@base-ui/react/button";
+//#region src/button.d.ts
+declare const buttonSizeVariants: {
+  readonly sm: "h-8 min-w-8 gap-2 px-3.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-4";
+  readonly md: "h-10 min-w-10 gap-2 px-4.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4.5";
+  readonly lg: "h-12 min-w-12 gap-2.5 px-5.5 text-gdt-md [&_svg:not([class*='size-'])]:size-6";
+  readonly xl: "h-14 min-w-14 gap-3 px-6.5 text-gdt-lg [&_svg:not([class*='size-'])]:size-6";
+  readonly icon: "size-10";
+  readonly "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3";
+  readonly "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5";
+  readonly "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5";
+  readonly "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5";
+};
+declare const buttonVariants: (props?: ({
+  variant?: "back" | "danger" | "ghost" | "glass-overlay" | "link-brand" | "link-neutral" | "primary" | "primary-outline" | "secondary" | "secondary-outline" | "tertiary" | "tertiary-outline" | "whatsapp" | null | undefined;
+  size?: "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonSize = keyof typeof buttonSizeVariants;
+type ResponsiveButtonSize = ButtonSize | ResponsiveValue<ButtonSize>;
+declare function Button$1({ className, variant, size, isLoading, children, disabled, ...props }: Button.Props & Omit<VariantProps<typeof buttonVariants>, "size"> & {
+  isLoading?: boolean;
+  size?: ResponsiveButtonSize;
+}): import("react").JSX.Element;
+type ButtonLinkProps = useRender.ComponentProps<"a"> & Omit<VariantProps<typeof buttonVariants>, "size"> & {
+  disabled?: boolean;
+  size?: ResponsiveButtonSize;
+};
+declare function ButtonLink({ className, render, variant, size, disabled, onClick, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { ButtonLink as n, buttonVariants as r, Button$1 as t };

package/dist/button-group.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 { Separator } from "./separator.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";

package/dist/button.d.ts

@@ -1,2 +1,2 @@
-import { n as ButtonLink, r as buttonVariants, t as Button } from "./button-DW5OijoR.js";
+import { n as ButtonLink, r as buttonVariants, t as Button } from "./button-BS5KCibF.js";
 export { Button, ButtonLink, buttonVariants };

package/dist/button.js

@@ -1,13 +1,24 @@
 "use client";
 import { Loader } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/button.tsx
+const buttonSizeVariants = {
+	sm: "h-8 min-w-8 gap-2 px-3.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-4",
+	md: "h-10 min-w-10 gap-2 px-4.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4.5",
+	lg: "h-12 min-w-12 gap-2.5 px-5.5 text-gdt-md [&_svg:not([class*='size-'])]:size-6",
+	xl: "h-14 min-w-14 gap-3 px-6.5 text-gdt-lg [&_svg:not([class*='size-'])]:size-6",
+	icon: "size-10",
+	"icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
+	"icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
+	"icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
+	"icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
+};
 const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,scale,translate] duration-(--duration-motion-press) ease-gdt-out outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px motion-reduce:active:not-aria-[haspopup]:translate-y-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
@@ -25,17 +36,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 			"link-brand": "border-transparent bg-transparent text-fg-brand hover:underline active:underline active:opacity-70",
 			"link-neutral": "border-transparent bg-transparent text-fg-secondary hover:underline active:underline active:opacity-70"
 		},
-		size: {
-			sm: "h-8 min-w-8 gap-2 px-3.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-4",
-			md: "h-10 min-w-10 gap-2 px-4.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4.5",
-			lg: "h-12 min-w-12 gap-2.5 px-5.5 text-gdt-md [&_svg:not([class*='size-'])]:size-6",
-			xl: "h-14 min-w-14 gap-3 px-6.5 text-gdt-lg [&_svg:not([class*='size-'])]:size-6",
-			icon: "size-10",
-			"icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-			"icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-			"icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-		}
+		size: buttonSizeVariants
 	},
 	compoundVariants: [{
 		variant: ["link-brand", "link-neutral"],
@@ -46,17 +47,44 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 		size: "md"
 	}
 });
+const responsiveButtonSizeClasses = {
+	base: { ...buttonSizeVariants },
+	md: {
+		sm: "md:h-8 md:min-w-8 md:gap-2 md:px-3.5 md:text-gdt-xs md:[&_svg:not([class*='size-'])]:size-4",
+		md: "md:h-10 md:min-w-10 md:gap-2 md:px-4.5 md:text-gdt-sm md:[&_svg:not([class*='size-'])]:size-4.5",
+		lg: "md:h-12 md:min-w-12 md:gap-2.5 md:px-5.5 md:text-gdt-md md:[&_svg:not([class*='size-'])]:size-6",
+		xl: "md:h-14 md:min-w-14 md:gap-3 md:px-6.5 md:text-gdt-lg md:[&_svg:not([class*='size-'])]:size-6",
+		icon: "md:size-10",
+		"icon-xs": "md:size-6 md:text-gdt-xs md:[&_svg:not([class*='size-'])]:size-3",
+		"icon-sm": "md:size-8 md:text-gdt-sm md:[&_svg:not([class*='size-'])]:size-3.5",
+		"icon-lg": "md:size-12.5 md:text-gdt-md md:[&_svg:not([class*='size-'])]:size-4.5",
+		"icon-xl": "md:size-14 md:text-gdt-lg md:[&_svg:not([class*='size-'])]:size-5"
+	},
+	lg: {
+		sm: "lg:h-8 lg:min-w-8 lg:gap-2 lg:px-3.5 lg:text-gdt-xs lg:[&_svg:not([class*='size-'])]:size-4",
+		md: "lg:h-10 lg:min-w-10 lg:gap-2 lg:px-4.5 lg:text-gdt-sm lg:[&_svg:not([class*='size-'])]:size-4.5",
+		lg: "lg:h-12 lg:min-w-12 lg:gap-2.5 lg:px-5.5 lg:text-gdt-md lg:[&_svg:not([class*='size-'])]:size-6",
+		xl: "lg:h-14 lg:min-w-14 lg:gap-3 lg:px-6.5 lg:text-gdt-lg lg:[&_svg:not([class*='size-'])]:size-6",
+		icon: "lg:size-10",
+		"icon-xs": "lg:size-6 lg:text-gdt-xs lg:[&_svg:not([class*='size-'])]:size-3",
+		"icon-sm": "lg:size-8 lg:text-gdt-sm lg:[&_svg:not([class*='size-'])]:size-3.5",
+		"icon-lg": "lg:size-12.5 lg:text-gdt-md lg:[&_svg:not([class*='size-'])]:size-4.5",
+		"icon-xl": "lg:size-14 lg:text-gdt-lg lg:[&_svg:not([class*='size-'])]:size-5"
+	}
+};
+function useResolvedButtonSize(size) {
+	const inherited = useComponentSizeValue();
+	return responsiveValueClasses(size ?? inherited, responsiveButtonSizeClasses);
+}
 function Button({ className, variant = "primary", size, isLoading = false, children, disabled = false, ...props }) {
-	const inheritedSize = useComponentSize();
-	const resolvedSize = size ?? inheritedSize;
+	const resolvedSize = useResolvedButtonSize(size);
 	const _disabled = disabled || isLoading;
 	return /* @__PURE__ */ jsxs(Button$1, {
 		"data-slot": "button",
 		className: cn(buttonVariants({
 			variant,
-			size: resolvedSize,
-			className
-		})),
+			size: null
+		}), resolvedSize.className, className),
 		disabled: _disabled,
 		...props,
 		children: [
@@ -67,15 +95,15 @@ function Button({ className, variant = "primary", size, isLoading = false, child
 	});
 }
 function ButtonLink({ className, render, variant = "primary", size, disabled = false, onClick, children, ...props }) {
-	const inheritedSize = useComponentSize();
+	const resolvedSize = useResolvedButtonSize(size);
+	const isLinkVariant = variant === "link-brand" || variant === "link-neutral";
 	return useRender({
 		defaultTagName: "a",
 		props: mergeProps({
 			className: cn(buttonVariants({
 				variant,
-				size: size ?? inheritedSize,
-				className
-			})),
+				size: null
+			}), resolvedSize.className, isLinkVariant && "md:h-auto md:min-h-0 md:w-auto md:min-w-0 md:px-0 md:py-0 lg:h-auto lg:min-h-0 lg:w-auto lg:min-w-0 lg:px-0 lg:py-0", className),
 			children
 		}, {
 			...props,

package/dist/calendar.js

@@ -2,7 +2,7 @@
 import { ChevronLeft, ChevronRight } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
-import { f as ComboboxList, h as ComboboxValue, l as ComboboxInput, m as ComboboxTrigger, o as ComboboxContent, s as ComboboxEmpty, t as Combobox, u as ComboboxItem } from "./combobox-B7cKFJ9V.js";
+import { _ as ComboboxValue, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, m as ComboboxList, o as ComboboxContent, s as ComboboxEmpty, t as Combobox } from "./combobox-CACVdp1R.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";

package/dist/carousel.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";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
@@ -44,9 +44,11 @@ type CarouselIndicatorProps = Omit<React.ComponentProps<"div">, "children" | "on
   selected?: number;
   /** Override the inherited carousel size. */
   size?: ComponentSize;
+  /** Maximum dots visible before the indicator becomes a sliding window. */
+  maxVisible?: number;
   /** Jump to a slide when a dot is activated. Defaults to the carousel API. */
   onSelect?: (index: number) => void;
 };
-declare function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, onSelect, ...props }: CarouselIndicatorProps): React.JSX.Element | null;
+declare function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, maxVisible, onSelect, ...props }: CarouselIndicatorProps): React.JSX.Element | null;
 //#endregion
 export { Carousel, type CarouselApi, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/dist/carousel.js

@@ -225,20 +225,16 @@ function CarouselNext({ className, ...props }) {
 		})]
 	});
 }
-/**
-* Past this many items the indicator switches from "show every dot" to the
-* Airbnb-style windowed mode: at most `MANY_WINDOW` dots, the active one kept
-* near the centre, and dots at a clipped edge faded down to imply more beyond.
-*/
-const MANY_THRESHOLD = 5;
+/** Default visible-dot limit before the indicator becomes a sliding window. */
 const MANY_WINDOW = 5;
 /**
 * Returns the dots to render plus the window start, so the determinate and
 * windowed ("many") cases share one render path. The dot strip is always the
 * full list; `start` drives the translate that slides it under the viewport.
 */
-function getIndicatorWindow(count, selected) {
-	if (count < MANY_THRESHOLD) return {
+function getIndicatorWindow(count, selected, maxVisible) {
+	const visibleLimit = Number.isFinite(maxVisible) ? Math.max(1, Math.floor(maxVisible)) : MANY_WINDOW;
+	if (count <= visibleLimit) return {
 		dots: Array.from({ length: count }, (_, index) => ({
 			index,
 			faded: false
@@ -246,8 +242,9 @@ function getIndicatorWindow(count, selected) {
 		start: 0,
 		visible: count
 	};
-	const start = Math.max(0, Math.min(selected - Math.floor(MANY_WINDOW / 2), count - MANY_WINDOW));
-	const end = start + MANY_WINDOW - 1;
+	const half = Math.floor(visibleLimit / 2);
+	const start = Math.max(0, Math.min(selected - half, count - visibleLimit));
+	const end = start + visibleLimit - 1;
 	const overflowLeft = start > 0;
 	const overflowRight = end < count - 1;
 	return {
@@ -256,7 +253,7 @@ function getIndicatorWindow(count, selected) {
 			faded: overflowLeft && index === start || overflowRight && index === end
 		})),
 		start,
-		visible: MANY_WINDOW
+		visible: visibleLimit
 	};
 }
 /** Dot diameter, gap, and pill padding per size — in px to keep them crisp. */
@@ -286,7 +283,7 @@ const INDICATOR_OFFSET = {
 	md: "bottom-[18px]",
 	lg: "bottom-6"
 };
-function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, onSelect, ...props }) {
+function CarouselIndicator({ className, count: countProp, selected: selectedProp, size: sizeProp, maxVisible = MANY_WINDOW, onSelect, ...props }) {
 	const ctx = React.useContext(CarouselContext);
 	const inheritedSize = useComponentSize(sizeProp);
 	const reducedMotion = useReducedMotion();
@@ -296,7 +293,7 @@ function CarouselIndicator({ className, count: countProp, selected: selectedProp
 	const handleSelect = onSelect ?? ctx?.scrollTo;
 	if (count <= 1) return null;
 	const { dot, gap, padX, padY } = INDICATOR_SIZES[size];
-	const { dots, start, visible } = getIndicatorWindow(count, selected);
+	const { dots, start, visible } = getIndicatorWindow(count, selected, maxVisible);
 	const step = dot + gap;
 	const viewportWidth = visible * step - gap;
 	return /* @__PURE__ */ jsx("div", {
@@ -327,7 +324,7 @@ function CarouselIndicator({ className, count: countProp, selected: selectedProp
 						style: {
 							width: dot,
 							height: dot,
-							opacity: faded ? .3 : isActive ? 1 : .55,
+							opacity: isActive ? 1 : faded ? .3 : .55,
 							transform: !reducedMotion && faded ? "scale(0.6)" : "scale(1)"
 						}
 					}, index);

package/dist/chart.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";
 import * as RechartsPrimitive from "recharts";

package/dist/chat.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-DW5OijoR.js";
+import { t as Button } from "./button-BS5KCibF.js";
 import { InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import * as React from "react";
 //#region src/chat.d.ts

package/dist/checkbox.d.ts

@@ -1,11 +1,11 @@
-import { VariantProps } from "class-variance-authority";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/checkbox.d.ts
 declare const checkboxVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type CheckboxSize = NonNullable<VariantProps<typeof checkboxVariants>["size"]>;
+type CheckboxSize = ComponentSizeValue;
 type CheckboxProps = Checkbox$1.Root.Props & {
   size?: CheckboxSize;
 };

package/dist/checkbox.js

@@ -1,17 +1,18 @@
 "use client";
 import { Check } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/checkbox.tsx
-const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas text-transparent outline-none transition-[background-color,border-color,box-shadow,color,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-disabled:active:scale-100 size-5 [--checkbox-icon-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--checkbox-icon-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--checkbox-icon-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--checkbox-icon-size:0.875rem]", { variants: { size: {
+const checkboxSizeVariants = {
 	sm: "size-4 [--checkbox-icon-size:0.625rem]",
 	md: "size-5 [--checkbox-icon-size:0.75rem]",
 	lg: "size-6 [--checkbox-icon-size:0.875rem]"
-} } });
+};
+const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas text-transparent outline-none transition-[background-color,border-color,box-shadow,color,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-disabled:active:scale-100", { variants: { size: checkboxSizeVariants } });
 /**
 * Compose with the shared field primitives for label and helper text.
 *
@@ -70,11 +71,11 @@ const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-c
 * ```
 */
 function Checkbox({ className, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveCheckboxSizes);
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		"data-size": resolvedSize,
-		className: cn(checkboxVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(checkboxVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",
@@ -83,5 +84,18 @@ function Checkbox({ className, size, ...props }) {
 		})
 	});
 }
+const responsiveCheckboxSizes = {
+	base: checkboxSizeVariants,
+	md: {
+		sm: "md:size-4 md:[--checkbox-icon-size:0.625rem]",
+		md: "md:size-5 md:[--checkbox-icon-size:0.75rem]",
+		lg: "md:size-6 md:[--checkbox-icon-size:0.875rem]"
+	},
+	lg: {
+		sm: "lg:size-4 lg:[--checkbox-icon-size:0.625rem]",
+		md: "lg:size-5 lg:[--checkbox-icon-size:0.75rem]",
+		lg: "lg:size-6 lg:[--checkbox-icon-size:0.875rem]"
+	}
+};
 //#endregion
 export { Checkbox, CheckboxGroup, checkboxVariants };

package/dist/{combobox-B7cKFJ9V.js → combobox-CACVdp1R.js}

@@ -107,9 +107,17 @@ const comboboxPopupInputVariants = cva("w-auto", {
 });
 const comboboxContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) 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-[chips=true]:min-w-(--anchor-width) data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=left]:data-ending-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=right]:data-ending-style:-translate-x-2 data-[side=inline-end]:data-starting-style:-translate-x-2 data-[side=inline-end]:data-ending-style:-translate-x-2 data-[side=inline-start]:data-starting-style:translate-x-2 data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-ending-style:translate-x-0 *:data-[slot=input-group]:mb-1", {
 	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" }
+});
+const comboboxContentBodyVariants = cva("flex min-h-0 flex-1 flex-col overflow-hidden", {
+	variants: { size: {
+		sm: "p-1",
+		md: "p-1.5",
+		lg: "p-2"
 	} },
 	defaultVariants: { size: "md" }
 });
@@ -201,7 +209,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
 		children: contents
 	});
 }
-function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, children, ...props }) {
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, children, header, footer, ...props }) {
 	const resolvedSize = useComponentSize();
 	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 		side,
@@ -213,19 +221,43 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		children: /* @__PURE__ */ jsx(Combobox.Popup, {
 			"data-slot": "combobox-content",
 			"data-chips": !!anchor,
-			className: cn("group/combobox-content", comboboxContentVariants({ size: resolvedSize }), "has-data-[slot=combobox-virtualized]:max-h-none", className),
+			className: cn("group/combobox-content flex flex-col", comboboxContentVariants({ size: resolvedSize }), "has-data-[slot=combobox-virtualized]:max-h-none", className),
 			...props,
-			children: /* @__PURE__ */ jsx(ComboboxPopupContext.Provider, {
+			children: /* @__PURE__ */ jsxs(ComboboxPopupContext.Provider, {
 				value: true,
-				children
+				children: [
+					header,
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "combobox-content-body",
+						className: comboboxContentBodyVariants({ size: resolvedSize }),
+						children
+					}),
+					footer
+				]
 			})
 		})
 	}) });
 }
+function ComboboxHeader({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "combobox-header",
+		className: cn("relative z-20 flex min-h-9 w-full shrink-0 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 ComboboxFooter({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "combobox-footer",
+		className: cn("relative z-20 flex min-h-9 w-full shrink-0 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 ComboboxList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.List, {
 		"data-slot": "combobox-list",
-		className: cn("no-scrollbar max-h-(--available-height) space-y-0.5 scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0 has-data-[slot=combobox-virtualized]:max-h-none has-data-[slot=combobox-virtualized]:space-y-0 has-data-[slot=combobox-virtualized]:overflow-hidden", className),
+		className: cn("no-scrollbar min-h-0 max-h-(--available-height) flex-1 space-y-0.5 scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0 has-data-[slot=combobox-virtualized]:max-h-none has-data-[slot=combobox-virtualized]:space-y-0 has-data-[slot=combobox-virtualized]:overflow-hidden", className),
 		...props
 	});
 }
@@ -395,4 +427,4 @@ function ComboboxVirtualizedList({ virtualizerRef, estimateSize = 40, overscan =
 	});
 }
 //#endregion
-export { useComboboxAnchor as _, ComboboxCollection as a, ComboboxGroup as c, ComboboxLabel as d, ComboboxList as f, ComboboxVirtualizedList as g, ComboboxValue as h, ComboboxChipsInput as i, ComboboxInput as l, ComboboxTrigger as m, ComboboxChip as n, ComboboxContent as o, ComboboxSeparator as p, ComboboxChips as r, ComboboxEmpty as s, Combobox$1 as t, ComboboxItem as u, useComboboxVirtualizer as v };
+export { ComboboxValue as _, ComboboxCollection as a, useComboboxVirtualizer as b, ComboboxFooter as c, ComboboxInput as d, ComboboxItem as f, ComboboxTrigger as g, ComboboxSeparator as h, ComboboxChipsInput as i, ComboboxGroup as l, ComboboxList as m, ComboboxChip as n, ComboboxContent as o, ComboboxLabel as p, ComboboxChips as r, ComboboxEmpty as s, Combobox$1 as t, ComboboxHeader as u, ComboboxVirtualizedList as v, useComboboxAnchor as y };

package/dist/combobox.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 * as React from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
 import { Virtualizer } from "@tanstack/react-virtual";
@@ -13,7 +13,12 @@ declare function ComboboxInput({ className, children, disabled, showTrigger, sho
   showTrigger?: boolean;
   showClear?: boolean;
 }): React.JSX.Element;
-declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, children, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, children, header, footer, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor"> & {
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}): React.JSX.Element;
+declare function ComboboxHeader({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function ComboboxFooter({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
 declare function ComboboxList({ className, ...props }: Combobox$1.List.Props): React.JSX.Element;
 declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): React.JSX.Element;
 declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): React.JSX.Element;
@@ -74,4 +79,4 @@ declare function ComboboxVirtualizedList<Item>({ virtualizerRef, estimateSize, o
   children: (item: Item, props: ComboboxVirtualItemProps) => React.ReactNode;
 }): React.JSX.Element | null;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, type ComboboxSize, ComboboxTrigger, ComboboxValue, type ComboboxVirtualItemProps, ComboboxVirtualizedList, type ComboboxVirtualizer, useComboboxAnchor, useComboboxVirtualizer };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, type ComboboxSize, ComboboxTrigger, ComboboxValue, type ComboboxVirtualItemProps, ComboboxVirtualizedList, type ComboboxVirtualizer, useComboboxAnchor, useComboboxVirtualizer };

package/dist/combobox.js

@@ -1,3 +1,3 @@
 "use client";
-import { _ as useComboboxAnchor, a as ComboboxCollection, c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxVirtualizedList, h as ComboboxValue, i as ComboboxChipsInput, l as ComboboxInput, m as ComboboxTrigger, n as ComboboxChip, o as ComboboxContent, p as ComboboxSeparator, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxItem, v as useComboboxVirtualizer } from "./combobox-B7cKFJ9V.js";
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useComboboxAnchor, useComboboxVirtualizer };
+import { _ as ComboboxValue, a as ComboboxCollection, b as useComboboxVirtualizer, c as ComboboxFooter, d as ComboboxInput, f as ComboboxItem, g as ComboboxTrigger, h as ComboboxSeparator, i as ComboboxChipsInput, l as ComboboxGroup, m as ComboboxList, n as ComboboxChip, o as ComboboxContent, p as ComboboxLabel, r as ComboboxChips, s as ComboboxEmpty, t as Combobox, u as ComboboxHeader, v as ComboboxVirtualizedList, y as useComboboxAnchor } from "./combobox-CACVdp1R.js";
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useComboboxAnchor, useComboboxVirtualizer };

package/dist/cta.d.ts

@@ -1,4 +1,4 @@
-import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
+import { n as ButtonLink, t as Button } from "./button-BS5KCibF.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";

package/dist/data-table.d.ts

@@ -1,8 +1,8 @@
-import { t as Button } from "./button-DW5OijoR.js";
+import { t as Button } from "./button-BS5KCibF.js";
 import { Empty } from "./empty-state.js";
 import { FilterApplyButtonProps, FilterContentProps, FilterProps, FilterResetButtonProps } from "./filter.js";
 import { Pagination } from "./pagination.js";
-import { a as PopoverFooter, n as PopoverBody, o as PopoverHeader, r as PopoverContent } from "./popover-DSlPeH7x.js";
+import { a as PopoverFooter, n as PopoverBody, o as PopoverHeader, r as PopoverContent } from "./popover-CNymD33m.js";
 import { Table as Table$1 } from "./table.js";
 import * as React from "react";
 import { ColumnDef, Row, Table, TableOptions } from "@tanstack/react-table";

package/dist/date-picker.d.ts

@@ -1,5 +1,5 @@
-import { n as InputSize } from "./input-CfoEJ8A6.js";
-import { t as PickerPlacementProps } from "./picker-CsnHtbe4.js";
+import { InputSizeValue } from "./input.js";
+import { t as PickerPlacementProps } from "./picker-j3txxA5t.js";
 import * as React from "react";
 import { DateRange, Matcher } from "react-day-picker";
 //#region src/date-picker.d.ts
@@ -7,7 +7,7 @@ type CaptionLayout = "label" | "dropdown" | "dropdown-months" | "dropdown-years"
 interface DatePickerBaseProps extends PickerPlacementProps {
   disabled?: boolean;
   /** Controls the trigger size. The calendar panel is not resized. */
-  size?: InputSize;
+  size?: InputSizeValue;
   placeholder?: string;
   className?: string;
   /** Caption style. Defaults to month + year dropdowns for quick navigation. */

package/dist/date-picker.js

@@ -3,7 +3,7 @@ import { Calendar } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { Calendar as Calendar$1 } from "./calendar.js";
 import { Popover, PopoverContent } from "./popover.js";
-import { n as PickerTrigger, t as PickerFooter } from "./picker-DmIiQKLJ.js";
+import { n as PickerTrigger, t as PickerFooter } from "./picker-BTXBrsl4.js";
 import { formatDate } from "./utils/format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";

package/dist/dialog.d.ts

@@ -16,8 +16,10 @@ declare const dialogIconVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type DialogContentProps = Dialog$1.Popup.Props & VariantProps<typeof dialogContentVariants> & {
   showCloseButton?: boolean;
+  /** @internal Positions specialized popup shells without changing the surface. */
+  popupClassName?: string;
 };
-declare function DialogContent({ className, children, size, showCloseButton, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogContent({ className, children, size, showCloseButton, popupClassName, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogIcon({ className, size, tone, ...props }: React.ComponentProps<"div"> & VariantProps<typeof dialogIconVariants>): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {