@giddaa-housing/ui 3.4.0 → 3.6.0

package/dist/accordion.js

@@ -1,6 +1,6 @@
 "use client";
 import { ChevronRight } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/accordion.tsx

package/dist/activity-timeline.js

@@ -1,6 +1,6 @@
 "use client";
 import { ChevronRight } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { Badge } from "./badge.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/alert.js

@@ -1,5 +1,5 @@
 import { X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx

package/dist/auth-layout.js

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { GiddaaLogo } from "./logo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth-layout.tsx

package/dist/avatar.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 //#region src/avatar.tsx

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 { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.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/bar-chart.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { ChartContainer, cartesianAxisProps } from "./chart.js";
 import { jsx } from "react/jsx-runtime";

package/dist/breadcrumb.js

@@ -1,6 +1,6 @@
 "use client";
 import { ChevronRight, MoreHorizontal } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

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/bullet-chart.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/bullet-chart.tsx

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-group.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { Separator } from "./separator.js";
 import { jsx } from "react/jsx-runtime";

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 { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.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

@@ -1,8 +1,8 @@
 "use client";
 import { ChevronLeft, ChevronRight } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, ComboboxValue } from "./combobox.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/call-card.js

@@ -1,6 +1,6 @@
 "use client";
 import { Maximize2, Mic, MicOff, Minimize2, Phone, User } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/card.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";

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

@@ -1,8 +1,8 @@
 "use client";
 import { ChevronLeft, ChevronRight } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
-import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
+import { useReducedMotion } from "./utils/use-reduced-motion.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -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/chart.js

@@ -1,6 +1,6 @@
 "use client";
 import { ArrowDown, ArrowUp } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

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/chat.js

@@ -1,6 +1,6 @@
 "use client";
 import { FileText, Image, Plus, Send, Video } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";

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 { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.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/collapsible.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 //#region src/collapsible.tsx