@giddaa-housing/ui 3.5.0 → 3.7.0

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

@@ -4,7 +4,7 @@ import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/dialog.d.ts
 declare function Dialog({ ...props }: Dialog$1.Root.Props): React.JSX.Element;
 declare function DialogTrigger({ ...props }: Dialog$1.Trigger.Props): React.JSX.Element;
-declare function DialogPortal({ ...props }: Dialog$1.Portal.Props): React.JSX.Element;
+declare function DialogPortal({ className, ...props }: Dialog$1.Portal.Props): React.JSX.Element;
 declare function DialogClose({ ...props }: Dialog$1.Close.Props): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React.JSX.Element;
 declare const dialogContentVariants: (props?: ({
@@ -16,8 +16,12 @@ declare const dialogIconVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type DialogContentProps = Dialog$1.Popup.Props & VariantProps<typeof dialogContentVariants> & {
   showCloseButton?: boolean;
+  /** Controls the visual response when this surface participates in a nested dialog stack. */
+  nestingEffect?: "stack" | "none";
+  /** @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, nestingEffect, 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"> & {

package/dist/dialog.js

@@ -3,16 +3,15 @@ import { X } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { Button } from "./button.js";
-import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/dialog.tsx
 function Dialog({ ...props }) {
-	return /* @__PURE__ */ jsx(DialogNestingProvider, { children: /* @__PURE__ */ jsx(Dialog$1.Root, {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
 		"data-slot": "dialog",
 		...props
-	}) });
+	});
 }
 function DialogTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
@@ -20,9 +19,10 @@ function DialogTrigger({ ...props }) {
 		...props
 	});
 }
-function DialogPortal({ ...props }) {
+function DialogPortal({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
 		"data-slot": "dialog-portal",
+		className: (state) => cn("group/dialog-portal", typeof className === "function" ? className(state) : className),
 		...props
 	});
 }
@@ -33,16 +33,14 @@ function DialogClose({ ...props }) {
 	});
 }
 function DialogOverlay({ className, ...props }) {
-	const nested = useDialogNestingDepth() > 1;
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		forceRender: true,
 		"data-slot": "dialog-overlay",
-		"data-nested": nested || void 0,
-		className: cn("fixed inset-0 z-50 transition-opacity duration-150 ease-gdt-out data-closed:opacity-0 data-open:opacity-100", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
+		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 ease-gdt-out data-closed:opacity-0 data-open:opacity-100 supports-backdrop-filter:backdrop-blur-xl group-has-[>.is-nested-dialog]/dialog-portal:bg-black/25 supports-backdrop-filter:group-has-[>.is-nested-dialog]/dialog-portal:backdrop-blur-none", className),
 		...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", {
 	variants: { size: {
 		sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
 		md: "sm:w-105 sm:[--dialog-padding:1.5rem]",
@@ -69,20 +67,25 @@ 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, nestingEffect = "stack", 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),
+			"data-nesting-effect": nestingEffect,
+			className: (state) => cn(dialogContentVariants({ size: resolvedSize }), nestingEffect === "stack" && state.nested && "is-nested-dialog", nestingEffect === "stack" && "data-[nested-dialog-open]:scale-[0.96]", 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: cn("pointer-events-auto absolute -top-10 right-0 z-10", nestingEffect === "stack" && "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/infotip.js

@@ -11,7 +11,6 @@ function Infotip({ ...props }) {
 }
 function InfotipTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
-		nativeButton: false,
 		"data-slot": "infotip-trigger",
 		openOnHover: true,
 		delay: 100,

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]",
@@ -55,12 +80,12 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 		...props
 	});
 }
-const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none rounded-full", {
+const inputGroupButtonVariants = cva("flex items-center gap-2 shadow-none rounded-full", {
 	variants: { size: {
-		xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "",
-		"icon-xs": "size-6 p-0 has-[>svg]:p-0",
-		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+		xs: "h-6 gap-1 px-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+		sm: "text-gdt-sm",
+		"icon-xs": "size-6 min-w-0 gap-0 p-0 text-gdt-xs has-[>svg]:p-0 [&_svg:not([class*='size-'])]:size-3.5",
+		"icon-sm": "size-8 min-w-0 gap-0 p-0 text-gdt-sm has-[>svg]:p-0 [&_svg:not([class*='size-'])]:size-4"
 	} },
 	defaultVariants: { size: "xs" }
 });

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 };