@giddaa-housing/ui 3.4.0 → 3.6.0

package/dist/input-group.js

@@ -1,38 +1,63 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { SizeProvider } from "./size-context.js";
+import { cn } from "./utils/cn.js";
+import { SizeProvider, resolveResponsiveValue, responsiveValueClasses } from "./size-context.js";
 import { Button } from "./button.js";
-import { InputSizeProvider, useInputComponentSize } from "./input-size-context.js";
+import { InputSizeProvider, useInputComponentSizeValue } from "./input-size-context.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/input-group.tsx
+const inputGroupSizeVariants = {
+	sm: "h-8",
+	md: "h-10",
+	lg: "h-12",
+	xl: "h-14"
+};
 const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 items-center overflow-hidden rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-caption-placeholder focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[[data-slot][aria-invalid=true]]:focus-within:border-line-danger has-[[data-slot][aria-invalid=true]]:focus-within:inset-ring-line-danger has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3", {
-	variants: { size: {
-		sm: "h-8",
-		md: "h-10",
-		lg: "h-12",
-		xl: "h-14"
-	} },
+	variants: { size: inputGroupSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function InputGroup({ className, size, ...props }) {
-	const resolvedSize = useInputComponentSize(size);
+	const sizeValue = useInputComponentSizeValue(size);
+	const resolvedSize = responsiveValueClasses(sizeValue, responsiveInputGroupSizes);
+	const inputSizes = resolveResponsiveValue(sizeValue);
+	const clamp = (value) => value === "xl" ? "lg" : value;
 	return /* @__PURE__ */ jsx(SizeProvider, {
-		size: resolvedSize === "xl" ? void 0 : resolvedSize,
+		size: resolvedSize.responsive ? {
+			base: clamp(inputSizes.base),
+			md: clamp(inputSizes.md),
+			lg: clamp(inputSizes.lg)
+		} : clamp(inputSizes.base),
 		children: /* @__PURE__ */ jsx(InputSizeProvider, {
-			size: resolvedSize,
+			size: sizeValue,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-slot": "input-group",
-				"data-size": resolvedSize,
+				"data-size": resolvedSize.base,
+				"data-size-md": resolvedSize.responsive ? resolvedSize.md : void 0,
+				"data-size-lg": resolvedSize.responsive ? resolvedSize.lg : void 0,
 				role: "group",
-				className: cn(inputGroupVariants({ size: resolvedSize }), className),
+				className: cn(inputGroupVariants({ size: null }), resolvedSize.className, className),
 				...props
 			})
 		})
 	});
 }
+const responsiveInputGroupSizes = {
+	base: inputGroupSizeVariants,
+	md: {
+		sm: "md:h-8",
+		md: "md:h-10",
+		lg: "md:h-12",
+		xl: "md:h-14"
+	},
+	lg: {
+		sm: "lg:h-8",
+		md: "lg:h-10",
+		lg: "lg:h-12",
+		xl: "lg:h-14"
+	}
+};
 const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-gdt-sm font-normal text-fg-secondary select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-4.5 group-data-[size=xl]/input-group:[&>svg:not([class*='size-'])]:size-5 [&>svg:not([class*='size-'])]:size-4", {
 	variants: { align: {
 		"inline-start": "order-first group-data-[size=sm]/input-group:pl-3 group-data-[size=md]/input-group:pl-3.5 group-data-[size=lg]/input-group:pl-4 group-data-[size=xl]/input-group:pl-4.5 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",

package/dist/input-otp.d.ts

@@ -1,4 +1,4 @@
-import { n as InputSize } from "./input-CfoEJ8A6.js";
+import { n as InputComponentSizeValue } from "./input-size-context-BMhves-J.js";
 import * as React from "react";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/input-otp.d.ts
@@ -7,7 +7,7 @@ declare const inputOTPSlotVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type InputOTPProps = Omit<OTPField.Root.Props, "className"> & {
   className?: string;
-  size?: InputSize;
+  size?: InputComponentSizeValue;
 };
 declare function InputOTP({ className, size, ...props }: InputOTPProps): React.JSX.Element;
 declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/input-otp.js

@@ -1,27 +1,30 @@
 "use client";
 import { Minus } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { InputSizeProvider, useInputComponentSize } from "./input-size-context.js";
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses } from "./size-context.js";
+import { InputSizeProvider, useInputComponentSizeValue } from "./input-size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/input-otp.tsx
+const inputOTPSlotSizeVariants = {
+	sm: "size-8 text-gdt-xs",
+	md: "size-10 text-gdt-sm",
+	lg: "size-12 text-gdt-md",
+	xl: "size-14 text-gdt-lg"
+};
 const inputOTPSlotVariants = cva("relative flex shrink-0 appearance-none items-center justify-center rounded-full border border-line bg-canvas text-center font-normal text-fg-primary caret-fg-primary outline-none transition-[background-color,border-color,box-shadow,color] placeholder:text-fg-caption-placeholder hover:border-line-strong focus:z-10 focus:border-line-focus focus:inset-ring-1 focus:inset-ring-line-focus data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:focus:border-line-danger aria-invalid:focus:inset-ring-line-danger data-invalid:border-line-danger data-invalid:text-fg-danger data-invalid:focus:border-line-danger data-invalid:focus:inset-ring-line-danger group-aria-invalid/input-otp:border-line-danger group-aria-invalid/input-otp:text-fg-danger group-aria-invalid/input-otp:focus:border-line-danger group-aria-invalid/input-otp:focus:inset-ring-line-danger", {
-	variants: { size: {
-		sm: "size-8 text-gdt-xs",
-		md: "size-10 text-gdt-sm",
-		lg: "size-12 text-gdt-md",
-		xl: "size-14 text-gdt-lg"
-	} },
+	variants: { size: inputOTPSlotSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function InputOTP({ className, size, ...props }) {
-	const resolvedSize = useInputComponentSize(size);
+	const sizeValue = useInputComponentSizeValue(size);
+	const resolvedSize = responsiveValueClasses(sizeValue, responsiveInputOTPSlotSizes);
 	return /* @__PURE__ */ jsx(InputSizeProvider, {
-		size: resolvedSize,
+		size: sizeValue,
 		children: /* @__PURE__ */ jsx(OTPField.Root, {
 			"data-slot": "input-otp",
-			"data-size": resolvedSize,
+			"data-size": resolvedSize.base,
 			className: cn("group/input-otp flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
 			...props
 		})
@@ -30,20 +33,34 @@ function InputOTP({ className, size, ...props }) {
 function InputOTPGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-otp-group",
-		"data-size": useInputComponentSize(),
 		className: cn("flex items-center rounded-full [&>[data-slot=input-otp-slot]:first-child]:rounded-l-full [&>[data-slot=input-otp-slot]:last-child]:rounded-r-full [&>[data-slot=input-otp-slot]:not(:first-child)]:-ml-px [&>[data-slot=input-otp-slot]]:rounded-none", className),
 		...props
 	});
 }
 function InputOTPSlot({ className, ...props }) {
-	const resolvedSize = useInputComponentSize();
+	const resolvedSize = responsiveValueClasses(useInputComponentSizeValue(), responsiveInputOTPSlotSizes);
 	return /* @__PURE__ */ jsx(OTPField.Input, {
 		"data-slot": "input-otp-slot",
-		"data-size": resolvedSize,
-		className: cn(inputOTPSlotVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(inputOTPSlotVariants({ size: null }), resolvedSize.className, className),
 		...props
 	});
 }
+const responsiveInputOTPSlotSizes = {
+	base: inputOTPSlotSizeVariants,
+	md: {
+		sm: "md:size-8 md:text-gdt-xs",
+		md: "md:size-10 md:text-gdt-sm",
+		lg: "md:size-12 md:text-gdt-md",
+		xl: "md:size-14 md:text-gdt-lg"
+	},
+	lg: {
+		sm: "lg:size-8 lg:text-gdt-xs",
+		md: "lg:size-10 lg:text-gdt-sm",
+		lg: "lg:size-12 lg:text-gdt-md",
+		xl: "lg:size-14 lg:text-gdt-lg"
+	}
+};
 function InputOTPSeparator({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(OTPField.Separator, {
 		"data-slot": "input-otp-separator",

package/dist/input-size-context-BMhves-J.d.ts

@@ -0,0 +1,13 @@
+import { a as ResponsiveValue } from "./size-context-BVhHduLi.js";
+import { ReactNode } from "react";
+//#region src/input-size-context.d.ts
+type InputComponentSize = "sm" | "md" | "lg" | "xl";
+type InputComponentSizeValue = InputComponentSize | ResponsiveValue<InputComponentSize>;
+declare function InputSizeProvider({ children, size }: {
+  children: ReactNode;
+  size?: InputComponentSizeValue | null;
+}): import("react").JSX.Element;
+declare function useInputComponentSize(size?: InputComponentSize | null, fallback?: InputComponentSize): InputComponentSize;
+declare function useInputComponentSizeValue(size?: InputComponentSizeValue | null, fallback?: InputComponentSize): ResponsiveValue<InputComponentSize> | InputComponentSize;
+//#endregion
+export { useInputComponentSizeValue as a, useInputComponentSize as i, InputComponentSizeValue as n, InputSizeProvider as r, InputComponentSize as t };

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

@@ -1,2 +1,2 @@
-import { n as InputSizeProvider, r as useInputComponentSize, t as InputComponentSize } from "./input-size-context-C-SFx9sx.js";
-export { type InputComponentSize, InputSizeProvider, useInputComponentSize };
+import { a as useInputComponentSizeValue, i as useInputComponentSize, n as InputComponentSizeValue, r as InputSizeProvider, t as InputComponentSize } from "./input-size-context-BMhves-J.js";
+export { type InputComponentSize, type InputComponentSizeValue, InputSizeProvider, useInputComponentSize, useInputComponentSizeValue };

package/dist/input-size-context.js

@@ -1,5 +1,5 @@
 "use client";
-import { useInheritedComponentSize } from "./size-context.js";
+import { resolveResponsiveValue, useInheritedComponentSize } from "./size-context.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 //#region src/input-size-context.tsx
@@ -12,9 +12,16 @@ function InputSizeProvider({ children, size }) {
 	});
 }
 function useInputComponentSize(size, fallback = "md") {
+	const inheritedInputSize = useContext(InputSizeContext);
+	const inheritedComponentSizeValue = useInheritedComponentSize();
+	const inheritedComponentSize = inheritedComponentSizeValue ? resolveResponsiveValue(inheritedComponentSizeValue).base : void 0;
+	const inheritedInputBase = inheritedInputSize ? resolveResponsiveValue(inheritedInputSize).base : void 0;
+	return size ?? inheritedInputBase ?? inheritedComponentSize ?? fallback;
+}
+function useInputComponentSizeValue(size, fallback = "md") {
 	const inheritedInputSize = useContext(InputSizeContext);
 	const inheritedComponentSize = useInheritedComponentSize();
 	return size ?? inheritedInputSize ?? inheritedComponentSize ?? fallback;
 }
 //#endregion
-export { InputSizeProvider, useInputComponentSize };
+export { InputSizeProvider, useInputComponentSize, useInputComponentSizeValue };

package/dist/input.d.ts

@@ -1,2 +1,20 @@
-import { n as InputSize, r as inputVariants, t as Input } from "./input-CfoEJ8A6.js";
-export { Input, type InputSize, inputVariants };
+import { n as InputComponentSizeValue } from "./input-size-context-BMhves-J.js";
+import * as React from "react";
+//#region src/input.d.ts
+declare const inputSizeVariants: {
+  readonly sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs";
+  readonly md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm";
+  readonly lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md";
+  readonly xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg";
+};
+declare const inputVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputProps = Omit<React.ComponentProps<"input">, "size"> & {
+  size?: InputComponentSizeValue;
+};
+type InputSize = keyof typeof inputSizeVariants;
+type InputSizeValue = InputComponentSizeValue;
+declare function Input({ className, size, type, ...props }: InputProps): React.JSX.Element;
+//#endregion
+export { Input, type InputSize, type InputSizeValue, inputVariants };

package/dist/input.js

@@ -1,28 +1,47 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { useInputComponentSize } from "./input-size-context.js";
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses } from "./size-context.js";
+import { useInputComponentSizeValue } from "./input-size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger autofill:border-line autofill:bg-canvas autofill:[-webkit-text-fill-color:var(--color-fg-primary)] autofill:[box-shadow:0_0_0_1000px_var(--color-canvas)_inset]", {
-	variants: { size: {
-		sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
-		md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
-		lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
-		xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
-	} },
+const inputSizeVariants = {
+	sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
+	md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
+	lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
+	xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
+};
+const inputVariants = cva("gdt-input-autofill flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger", {
+	variants: { size: inputSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function Input({ className, size, type, ...props }) {
-	const resolvedSize = useInputComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useInputComponentSizeValue(size), responsiveInputSizes);
 	return /* @__PURE__ */ jsx(Input$1, {
 		type,
 		"data-slot": "input",
-		"data-size": resolvedSize,
-		className: cn(inputVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		"data-size-md": resolvedSize.responsive ? resolvedSize.md : void 0,
+		"data-size-lg": resolvedSize.responsive ? resolvedSize.lg : void 0,
+		className: cn(inputVariants({ size: null }), resolvedSize.className, className),
 		...props
 	});
 }
+const responsiveInputSizes = {
+	base: inputSizeVariants,
+	md: {
+		sm: "md:h-8 md:px-3 md:text-gdt-xs md:file:text-gdt-xs",
+		md: "md:h-10 md:px-3.5 md:text-gdt-sm md:file:text-gdt-sm",
+		lg: "md:h-12 md:px-4 md:text-gdt-md md:file:text-gdt-md",
+		xl: "md:h-14 md:px-4.5 md:text-gdt-lg md:file:text-gdt-lg"
+	},
+	lg: {
+		sm: "lg:h-8 lg:px-3 lg:text-gdt-xs lg:file:text-gdt-xs",
+		md: "lg:h-10 lg:px-3.5 lg:text-gdt-sm lg:file:text-gdt-sm",
+		lg: "lg:h-12 lg:px-4 lg:text-gdt-md lg:file:text-gdt-md",
+		xl: "lg:h-14 lg:px-4.5 lg:text-gdt-lg lg:file:text-gdt-lg"
+	}
+};
 //#endregion
 export { Input, inputVariants };

package/dist/item.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/item.tsx
 function Item({ className, render, ...props }) {

package/dist/kpi-card.js

@@ -1,6 +1,6 @@
 "use client";
 import { ArrowDown, ArrowUp, ArrowUpRight } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Skeleton } from "./skeleton.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";

package/dist/label.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/label.tsx
 function Label({ className, children, withAsterisk = false, showOptionalText = false, ...props }) {

package/dist/line-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 { Area, AreaChart as AreaChart$1, CartesianGrid, Line, LineChart as LineChart$1, XAxis, YAxis } from "recharts";

package/dist/line-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/list-item.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Avatar } from "./avatar.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";

package/dist/map-indicator.js

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/map-indicator.tsx
 const MAP_INDICATOR_DIMENSIONS = {

package/dist/mask-input.d.ts

@@ -1,4 +1,4 @@
-import { t as Input } from "./input-CfoEJ8A6.js";
+import { Input } from "./input.js";
 import * as React from "react";
 //#region src/mask-input.d.ts
 type MaskToken = {

package/dist/match.d.ts

@@ -1,15 +1,18 @@
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/match.d.ts
 declare const matchVariants: (props?: ({
   variant?: "bar" | "donut" | null | undefined;
+  size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type MatchVariant = NonNullable<VariantProps<typeof matchVariants>["variant"]>;
-type MatchProps = Omit<React.ComponentProps<"button">, "children" | "value"> & VariantProps<typeof matchVariants> & {
+type MatchProps = Omit<React.ComponentProps<"button">, "children" | "value"> & Omit<VariantProps<typeof matchVariants>, "size"> & {
   value: number;
+  size?: ComponentSizeValue;
   label?: string;
   showChevron?: boolean;
 };
-declare function Match({ className, value, variant, label, showChevron, type, "aria-label": ariaLabel, ...props }: MatchProps): React.JSX.Element;
+declare function Match({ className, value, variant, size, label, showChevron, type, "aria-label": ariaLabel, ...props }: MatchProps): React.JSX.Element;
 //#endregion
 export { Match, type MatchProps, type MatchVariant, matchVariants };

package/dist/match.js

@@ -1,55 +1,124 @@
 "use client";
 import { ChevronDown } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
+import { resolveResponsiveComponentSize, useComponentSizeValue } from "./size-context.js";
 import { CircularProgress } from "./progress.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/match.tsx
-const matchVariants = cva("inline-flex h-8 w-fit shrink-0 items-center rounded-full border border-line-subtle bg-surface text-fg-primary shadow-none transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-60", {
-	variants: { variant: {
-		bar: "gap-2 px-3",
-		donut: "gap-3 pl-2 pr-3"
-	} },
-	defaultVariants: { variant: "bar" }
+const matchVariants = cva("inline-flex w-fit shrink-0 items-center rounded-full border border-line-subtle bg-surface text-fg-primary shadow-none transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-60", {
+	variants: {
+		variant: {
+			bar: "",
+			donut: ""
+		},
+		size: {
+			sm: "h-7 text-gdt-subtext",
+			md: "h-8 text-gdt-xs",
+			lg: "h-10 text-gdt-sm"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "bar",
+			size: "sm",
+			className: "gap-1.5 px-2.5"
+		},
+		{
+			variant: "bar",
+			size: "md",
+			className: "gap-2 px-3"
+		},
+		{
+			variant: "bar",
+			size: "lg",
+			className: "gap-2.5 px-3.5"
+		},
+		{
+			variant: "donut",
+			size: "sm",
+			className: "gap-2 pl-1.5 pr-2.5"
+		},
+		{
+			variant: "donut",
+			size: "md",
+			className: "gap-3 pl-2 pr-3"
+		},
+		{
+			variant: "donut",
+			size: "lg",
+			className: "gap-3.5 pl-2.5 pr-3.5"
+		}
+	],
+	defaultVariants: {
+		variant: "bar",
+		size: "md"
+	}
 });
+const matchDonutSizes = {
+	sm: {
+		pixelSize: 20,
+		strokeWidth: 3
+	},
+	md: {
+		pixelSize: 24,
+		strokeWidth: 4
+	},
+	lg: {
+		pixelSize: 28,
+		strokeWidth: 4
+	}
+};
+const matchBarSizes = {
+	sm: "h-1 w-12",
+	md: "h-1.5 w-15",
+	lg: "h-2 w-18"
+};
+const matchChevronSizes = {
+	sm: "size-2.5",
+	md: "size-3",
+	lg: "size-3.5"
+};
 function normalizeMatchValue(value) {
 	if (!Number.isFinite(value)) return 0;
 	return Math.min(100, Math.max(0, Math.round(value)));
 }
-function Match({ className, value, variant = "bar", label = "Match", showChevron = true, type = "button", "aria-label": ariaLabel, ...props }) {
+function Match({ className, value, variant = "bar", size, label = "Match", showChevron = true, type = "button", "aria-label": ariaLabel, ...props }) {
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSizes = resolveResponsiveComponentSize(sizeValue);
+	const responsive = typeof sizeValue !== "string";
+	const resolvedVariant = variant ?? "bar";
 	const progress = normalizeMatchValue(value);
 	const text = `${progress}% ${label}`;
+	const rootSizeClasses = cn(matchVariants({
+		variant: resolvedVariant,
+		size: resolvedSizes.base
+	}), responsive && matchBreakpointClasses(resolvedVariant, "md", resolvedSizes.md), responsive && matchBreakpointClasses(resolvedVariant, "lg", resolvedSizes.lg));
 	return /* @__PURE__ */ jsxs("button", {
 		type,
 		"aria-label": ariaLabel ?? text,
 		"data-slot": "match",
-		"data-variant": variant,
-		className: cn(matchVariants({ variant }), className),
+		"data-variant": resolvedVariant,
+		"data-size": resolvedSizes.base,
+		"data-size-md": responsive ? resolvedSizes.md : void 0,
+		"data-size-lg": responsive ? resolvedSizes.lg : void 0,
+		className: cn(rootSizeClasses, className),
 		...props,
 		children: [
-			variant === "donut" ? /* @__PURE__ */ jsx(CircularProgress, {
-				"aria-hidden": "true",
-				role: "presentation",
-				"data-slot": "match-donut",
-				value: progress,
-				pixelSize: 24,
-				strokeWidth: 4,
-				strokeLinecap: "butt",
-				className: "shrink-0",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "sr-only",
-					children: [progress, "%"]
-				})
+			resolvedVariant === "donut" ? /* @__PURE__ */ jsx(MatchDonut, {
+				progress,
+				sizes: resolvedSizes,
+				responsive
 			}) : null,
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "match-label",
-				className: "shrink-0 text-[10px] font-bold leading-3",
+				className: "shrink-0 font-bold",
 				children: text
 			}),
-			variant === "bar" ? /* @__PURE__ */ jsx("span", {
+			resolvedVariant === "bar" ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				"data-slot": "match-bar-track",
-				className: "relative h-1.5 w-15 shrink-0 overflow-hidden rounded-full bg-surface-raised",
+				className: cn("relative shrink-0 overflow-hidden rounded-full bg-surface-raised", matchBarSizes[resolvedSizes.base], responsive && responsiveClass("md", matchBarSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchBarSizes[resolvedSizes.lg])),
 				children: /* @__PURE__ */ jsx("span", {
 					"data-slot": "match-bar-fill",
 					className: "absolute inset-y-0 left-0 rounded-full bg-action-primary",
@@ -59,10 +128,97 @@ function Match({ className, value, variant = "bar", label = "Match", showChevron
 			showChevron ? /* @__PURE__ */ jsx(ChevronDown, {
 				"aria-hidden": "true",
 				"data-slot": "match-chevron",
-				className: "size-3 shrink-0 text-fg-secondary"
+				className: cn("shrink-0 text-fg-secondary", matchChevronSizes[resolvedSizes.base], responsive && responsiveClass("md", matchChevronSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchChevronSizes[resolvedSizes.lg]))
 			}) : null
 		]
 	});
 }
+const responsiveSizeClasses = {
+	md: {
+		sm: "md:h-7 md:text-gdt-subtext",
+		md: "md:h-8 md:text-gdt-xs",
+		lg: "md:h-10 md:text-gdt-sm"
+	},
+	lg: {
+		sm: "lg:h-7 lg:text-gdt-subtext",
+		md: "lg:h-8 lg:text-gdt-xs",
+		lg: "lg:h-10 lg:text-gdt-sm"
+	}
+};
+const responsiveVariantClasses = {
+	md: {
+		bar: {
+			sm: "md:gap-1.5 md:px-2.5",
+			md: "md:gap-2 md:px-3",
+			lg: "md:gap-2.5 md:px-3.5"
+		},
+		donut: {
+			sm: "md:gap-2 md:pl-1.5 md:pr-2.5",
+			md: "md:gap-3 md:pl-2 md:pr-3",
+			lg: "md:gap-3.5 md:pl-2.5 md:pr-3.5"
+		}
+	},
+	lg: {
+		bar: {
+			sm: "lg:gap-1.5 lg:px-2.5",
+			md: "lg:gap-2 lg:px-3",
+			lg: "lg:gap-2.5 lg:px-3.5"
+		},
+		donut: {
+			sm: "lg:gap-2 lg:pl-1.5 lg:pr-2.5",
+			md: "lg:gap-3 lg:pl-2 lg:pr-3",
+			lg: "lg:gap-3.5 lg:pl-2.5 lg:pr-3.5"
+		}
+	}
+};
+function matchBreakpointClasses(variant, breakpoint, size) {
+	return cn(responsiveSizeClasses[breakpoint][size], responsiveVariantClasses[breakpoint][variant][size]);
+}
+const responsiveTokenClasses = {
+	md: {
+		"h-1 w-12": "md:h-1 md:w-12",
+		"h-1.5 w-15": "md:h-1.5 md:w-15",
+		"h-2 w-18": "md:h-2 md:w-18",
+		"size-2.5": "md:size-2.5",
+		"size-3": "md:size-3",
+		"size-3.5": "md:size-3.5"
+	},
+	lg: {
+		"h-1 w-12": "lg:h-1 lg:w-12",
+		"h-1.5 w-15": "lg:h-1.5 lg:w-15",
+		"h-2 w-18": "lg:h-2 lg:w-18",
+		"size-2.5": "lg:size-2.5",
+		"size-3": "lg:size-3",
+		"size-3.5": "lg:size-3.5"
+	}
+};
+function responsiveClass(breakpoint, className) {
+	return responsiveTokenClasses[breakpoint][className];
+}
+function MatchDonut({ progress, sizes, responsive }) {
+	return (responsive ? [
+		"base",
+		"md",
+		"lg"
+	] : ["base"]).map((breakpoint) => {
+		const size = sizes[breakpoint];
+		const dimensions = matchDonutSizes[size];
+		const visibility = responsive ? breakpoint === "base" ? "md:hidden" : breakpoint === "md" ? "hidden md:grid lg:hidden" : "hidden lg:grid" : "";
+		return /* @__PURE__ */ jsx(CircularProgress, {
+			"aria-hidden": "true",
+			role: "presentation",
+			"data-slot": "match-donut",
+			value: progress,
+			pixelSize: dimensions.pixelSize,
+			strokeWidth: dimensions.strokeWidth,
+			strokeLinecap: "butt",
+			className: cn("shrink-0", visibility),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [progress, "%"]
+			})
+		}, breakpoint);
+	});
+}
 //#endregion
 export { Match, matchVariants };