@botiverse/raft-ui 0.68.0 → 0.69.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.69.0](https://github.com/botiverse/raft-design/compare/v0.68.0...v0.69.0) (2026-11-06)
+
+### Added
+
+- **InputGroup** `size`: `md` for a field in a toolbar or a filter row, `lg` (the default, unchanged) for a field on its own. At `md` the field is the row's button height: 32px on a phone and a touch screen, like the `md` Buttons and PickerTriggerButtons beside it, with its input taking a 44px tap area, 6px past the box above and below; with a mouse it stays the control height, 34px. The root carries `data-size`. A Button in an `md` field's end addon is 20px by touch (22px with a mouse), 6px inside the box. ([#1039](https://github.com/botiverse/raft-design/pull/1039))
+  - Why: on a tablet held landscape, a 44px search field beside 32px filter triggers and a view switch read taller and heavier than the rest of the filter row; a field in a row now takes the row's button height.
+  - Affects: nothing until a field opts in with `size="md"`; every InputGroup without it renders as before.
+  - Docs: https://raft-design.botiverse.build/components/input-group/#sizes
+
 ## [0.68.0](https://github.com/botiverse/raft-design/compare/v0.67.0...v0.68.0) (2026-11-06)
 
 ### Changed

package/dist/components/input-group/input-group.d.mts

@@ -7,6 +7,12 @@ import { ComponentPropsWithRef } from "react";
 import { Input } from "@base-ui/react/input";
 //#region src/components/input-group/input-group.d.ts
 declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    md: {
+      root: string[];
+    };
+    lg: {};
+  };
   align: {
     "inline-start": {
       addon: string;
@@ -31,6 +37,12 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   textInner: string[];
   control: string[];
 }, undefined, {
+  size: {
+    md: {
+      root: string[];
+    };
+    lg: {};
+  };
   align: {
     "inline-start": {
       addon: string;
@@ -55,6 +67,12 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   textInner: string[];
   control: string[];
 }, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    md: {
+      root: string[];
+    };
+    lg: {};
+  };
   align: {
     "inline-start": {
       addon: string;
@@ -79,8 +97,16 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   textInner: string[];
   control: string[];
 }>>;
-export type InputGroupProps = ComponentPropsWithRef<"div">;
-export declare function InputGroup({ className, ...props }: InputGroupProps): import("react").JSX.Element;
+export type InputGroupProps = ComponentPropsWithRef<"div"> & {
+  /**
+   * `lg` (default): the control height, for a field on its own in a form or a
+   * dialog. `md`: a field in a toolbar or a filter row, as high as the row's
+   * `md` buttons and filter triggers (32px by touch, with a 44px tap area; the
+   * control height with a mouse).
+   */
+  size?: "md" | "lg";
+};
+export declare function InputGroup({ size, className, ...props }: InputGroupProps): import("react").JSX.Element;
 export type InputGroupAddonProps = ComponentPropsWithRef<"div"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
 declare function InputGroupAddonRoot({ align, variant, className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
 export type InputGroupAddonTextProps = ComponentPropsWithRef<"span"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;

package/dist/components/input-group/input-group.mjs

@@ -37,6 +37,18 @@ const inputGroup = tv({
 		]
 	},
 	variants: {
+		size: {
+			md: { root: [
+				"h-8 md:pointer-fine:h-control rounded-control overflow-visible",
+				"[--ig-hit:calc(--spacing(1.5)+1.5px)] md:pointer-fine:[--ig-hit:0px]",
+				"*:data-[slot=input-group-control]:-my-(--ig-hit) *:data-[slot=input-group-control]:h-[calc(100%+2*var(--ig-hit))]",
+				"[--control-embedded-size:calc(2rem-2*var(--control-embedded-inset))]",
+				"md:pointer-fine:[--control-embedded-size:calc(var(--control-height)-2*var(--control-embedded-inset))]",
+				"*:data-[variant=container]:data-[align=inline-start]:rounded-s-[calc(var(--radius-control)-1.5px)]",
+				"*:data-[variant=container]:data-[align=inline-end]:rounded-e-[calc(var(--radius-control)-1.5px)]"
+			] },
+			lg: {}
+		},
 		align: {
 			"inline-start": {
 				addon: "order-first",
@@ -111,14 +123,16 @@ const inputGroup = tv({
 		}
 	],
 	defaultVariants: {
+		size: "lg",
 		align: "inline-start",
 		variant: "default"
 	}
 });
-function InputGroup({ className, ...props }) {
-	const { root } = inputGroup();
+function InputGroup({ size = "lg", className, ...props }) {
+	const { root } = inputGroup({ size });
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
+		"data-size": size,
 		className: root({ className }),
 		...props
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.68.0",
+  "version": "0.69.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",