@giddaa-housing/ui 3.5.0 → 3.6.0

package/dist/dialog.js

@@ -42,7 +42,7 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
-const dialogContentVariants = cva("group/dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-5rem)] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow) outline-none [--dialog-padding:1.25rem] origin-center transition-[opacity,scale] duration-[var(--duration-motion-popup)] ease-gdt-out data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 data-[nested-dialog-open]:scale-[0.96]", {
+const dialogContentVariants = cva("group/dialog-content pointer-events-none fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-visible outline-none [--dialog-padding:1.25rem] origin-center transition-[opacity,scale] duration-[var(--duration-motion-popup)] ease-gdt-out data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 data-[nested-dialog-open]:scale-[0.96]", {
 	variants: { size: {
 		sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
 		md: "sm:w-105 sm:[--dialog-padding:1.5rem]",
@@ -69,20 +69,24 @@ const dialogIconVariants = cva("flex shrink-0 items-center justify-center [&_svg
 		tone: "brand"
 	}
 });
-function DialogContent({ className, children, size, showCloseButton = true, ...props }) {
+function DialogContent({ className, children, size, showCloseButton = true, popupClassName, ...props }) {
 	const resolvedSize = useComponentSize(size);
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize,
 		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 			"data-slot": "dialog-content",
 			"data-size": resolvedSize,
-			className: cn(dialogContentVariants({ size: resolvedSize }), className),
+			className: cn(dialogContentVariants({ size: resolvedSize }), popupClassName),
 			...props,
-			children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "dialog-surface",
+				className: cn("pointer-events-auto flex max-h-[calc(100dvh-5rem)] w-full flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow)", className),
+				children
+			}), showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 				"data-slot": "dialog-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "tertiary",
-					className: "absolute -top-10 right-0 z-10 group-data-[nested-dialog-open]/dialog-content:hidden",
+					className: "pointer-events-auto absolute -top-10 right-0 z-10 group-data-[nested-dialog-open]/dialog-content:hidden",
 					size: "icon-sm",
 					children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",

package/dist/dropdown-menu.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 { Menu } from "@base-ui/react/menu";
 //#region src/dropdown-menu.d.ts

package/dist/field.d.ts

@@ -1,3 +1,4 @@
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { Label } from "./label.js";
 import { VariantProps } from "class-variance-authority";
 //#region src/field.d.ts
@@ -10,7 +11,9 @@ declare const fieldVariants: (props?: ({
   orientation?: "horizontal" | "responsive" | "vertical" | null | undefined;
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Field({ className, orientation, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
+declare function Field({ className, orientation, size, ...props }: React.ComponentProps<"div"> & Omit<VariantProps<typeof fieldVariants>, "size"> & {
+  size?: ComponentSizeValue;
+}): import("react").JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;

package/dist/field.js

@@ -1,12 +1,17 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider, responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { Separator } from "./separator.js";
 import { Label } from "./label.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { useMemo } from "react";
 //#region src/field.tsx
+const fieldSizeVariants = {
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2"
+};
 function FieldSet({ className, ...props }) {
 	return /* @__PURE__ */ jsx("fieldset", {
 		"data-slot": "field-set",
@@ -36,11 +41,7 @@ const fieldVariants = cva("group/field flex w-full", {
 			horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio],[role=switch]]:mt-px data-[size=sm]:gap-1.5 data-[size=md]:gap-2.5 data-[size=lg]:gap-3",
 			responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio],[role=switch]]:mt-px"
 		},
-		size: {
-			sm: "gap-1",
-			md: "gap-1.5",
-			lg: "gap-2"
-		}
+		size: fieldSizeVariants
 	},
 	defaultVariants: {
 		orientation: "vertical",
@@ -48,22 +49,38 @@ const fieldVariants = cva("group/field flex w-full", {
 	}
 });
 function Field({ className, orientation = "vertical", size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSize = responsiveValueClasses(sizeValue, responsiveFieldSizes);
 	return /* @__PURE__ */ jsx(SizeProvider, {
-		size: resolvedSize,
+		size: sizeValue,
 		children: /* @__PURE__ */ jsx("div", {
 			role: "group",
 			"data-slot": "field",
 			"data-orientation": orientation,
-			"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,
 			className: cn(fieldVariants({
 				orientation,
-				size: resolvedSize
-			}), className),
+				size: null
+			}), resolvedSize.className, className),
 			...props
 		})
 	});
 }
+const responsiveFieldSizes = {
+	base: fieldSizeVariants,
+	md: {
+		sm: "md:gap-1",
+		md: "md:gap-1.5",
+		lg: "md:gap-2"
+	},
+	lg: {
+		sm: "lg:gap-1",
+		md: "lg:gap-1.5",
+		lg: "lg:gap-2"
+	}
+};
 function FieldContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "field-content",

package/dist/footer.d.ts

@@ -1,4 +1,4 @@
-import { n as InputSize } from "./input-CfoEJ8A6.js";
+import { InputSizeValue } from "./input.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -39,7 +39,7 @@ declare function FooterNewsletter({ className, ...props }: React.ComponentProps<
 declare function FooterNewsletterTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
 declare function FooterNewsletterDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 declare function FooterNewsletterControl({ className, children, size, ...props }: React.ComponentProps<"div"> & {
-  size?: InputSize;
+  size?: InputSizeValue;
 }): React.JSX.Element;
 declare function FooterBottom({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterLegalLinks({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;

package/dist/funnel-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 { ChartCard, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/funnel-chart.d.ts

package/dist/heatmap-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 { ChartCard } from "./chart.js";
 import * as React from "react";
 //#region src/heatmap-chart.d.ts

package/dist/input-group.d.ts

@@ -1,11 +1,11 @@
-import { t as Button } from "./button-DW5OijoR.js";
-import { n as InputSize } from "./input-CfoEJ8A6.js";
-import { n as TextareaSize } from "./textarea-IS_D8pXf.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
+import { t as Button } from "./button-BS5KCibF.js";
+import { n as InputComponentSizeValue } from "./input-size-context-BMhves-J.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/input-group.d.ts
 declare function InputGroup({ className, size, ...props }: React.ComponentProps<"div"> & {
-  size?: InputSize;
+  size?: InputComponentSizeValue;
 }): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
   align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
@@ -19,10 +19,10 @@ declare function InputGroupButton({ className, type, variant, size, ...props }:
 }): React.JSX.Element;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function InputGroupInput({ className, size, ...props }: Omit<React.ComponentProps<"input">, "size"> & {
-  size?: InputSize;
+  size?: InputComponentSizeValue;
 }): React.JSX.Element;
 declare function InputGroupTextarea({ className, size, ...props }: Omit<React.ComponentProps<"textarea">, "size"> & {
-  size?: TextareaSize;
+  size?: ComponentSizeValue;
 }): React.JSX.Element;
 //#endregion
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/input-group.js

@@ -1,38 +1,63 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { SizeProvider } from "./size-context.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 { cn } from "./utils/cn.js";
-import { InputSizeProvider, useInputComponentSize } from "./input-size-context.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 { cn } from "./utils/cn.js";
-import { useInputComponentSize } from "./input-size-context.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/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/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 };