@alpic-ai/ui 1.168.1 → 1.169.0

package/dist/components/bar-list.mjs

@@ -19,7 +19,6 @@ const SECONDARY_BADGE_VARIANT = {
 };
 const PLACEHOLDER_HEIGHT = 168;
 const RAMP_CEILING = .8;
-const SEMANTIC_FLOOR = .62;
 const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
 const ROW_INTERACTIVE_CLASS = "rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card";
 function BarList({ data, index, dataKey = "value", secondaryKey, secondaryVariantKey, titleKey, maxItems, palette, semantic, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
@@ -39,7 +38,7 @@ function BarList({ data, index, dataKey = "value", secondaryKey, secondaryVarian
 		const capped = maxItems ? mapped.slice(0, maxItems) : mapped;
 		return capped.map((row, rank) => {
 			const rankFraction = capped.length > 1 ? rank / (capped.length - 1) : 0;
-			const accentWeight = Math.round((1 - rankFraction * (1 - SEMANTIC_FLOOR)) * 100);
+			const accentWeight = Math.round((1 - rankFraction * .38) * 100);
 			return {
 				...row,
 				color: accent ? `color-mix(in oklab, ${accent} ${accentWeight}%, white)` : rampColor(paletteName, rankFraction * RAMP_CEILING)

package/dist/components/breadcrumb.mjs

@@ -29,7 +29,7 @@ function BreadcrumbItem({ className, ...props }) {
 function BreadcrumbLink({ asChild, className, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
 		"data-slot": "breadcrumb-link",
-		className: cn("type-text-sm font-medium text-subtle-foreground transition-colors [@media(hover:hover)]:hover:text-muted-foreground", className),
+		className: cn("type-text-sm font-medium text-subtle-foreground transition-colors [@media(hover:hover)]:hover:text-muted-foreground", "inline-flex items-center max-md:min-h-11", className),
 		...props
 	});
 }

package/dist/components/button.mjs

@@ -8,6 +8,7 @@ import { Slot, Slottable } from "@radix-ui/react-slot";
 const buttonVariants = cva([
 	"inline-flex items-center justify-center gap-1 whitespace-nowrap",
 	"h-8 px-2 rounded-md",
+	"max-md:min-h-11",
 	"font-medium",
 	"transition-colors",
 	"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
@@ -24,13 +25,13 @@ const buttonVariants = cva([
 				"focus-visible:bg-background"
 			].join(" "),
 			link: [
-				"h-auto px-0 rounded-xs underline-offset-4",
+				"h-auto max-md:min-h-0 px-0 rounded-xs underline-offset-4",
 				"text-link",
 				"[@media(hover:hover)]:hover:underline",
 				"focus-visible:bg-background"
 			].join(" "),
 			"link-muted": [
-				"h-auto px-0 rounded-xs underline-offset-4",
+				"h-auto max-md:min-h-0 px-0 rounded-xs underline-offset-4",
 				"text-link-muted",
 				"[@media(hover:hover)]:hover:underline",
 				"focus-visible:bg-background"
@@ -46,8 +47,8 @@ const buttonVariants = cva([
 		},
 		size: {
 			default: "type-text-sm",
-			icon: "size-8 p-0 type-text-sm",
-			"icon-rounded": "size-8 p-0 rounded-full type-text-sm",
+			icon: "size-8 max-md:min-w-11 p-0 type-text-sm",
+			"icon-rounded": "size-8 max-md:min-w-11 p-0 rounded-full type-text-sm",
 			pill: "h-7 px-3 rounded-full type-text-xs"
 		}
 	},

package/dist/components/dialog.mjs

@@ -52,7 +52,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 			"data-slot": "dialog-close",
-			className: cn("absolute top-3 right-4 flex size-8 items-center justify-center rounded-md", "text-subtle-foreground transition-colors", "[@media(hover:hover)]:hover:text-foreground", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", "disabled:pointer-events-none"),
+			className: cn("absolute top-3 right-4 flex size-8 items-center justify-center rounded-md", "max-md:before:absolute max-md:before:top-1/2 max-md:before:left-1/2 max-md:before:size-11 max-md:before:-translate-x-1/2 max-md:before:-translate-y-1/2 max-md:before:content-['']", "text-subtle-foreground transition-colors", "[@media(hover:hover)]:hover:text-foreground", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", "disabled:pointer-events-none"),
 			children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: "Close"

package/dist/components/dropdown-menu.mjs

@@ -39,6 +39,7 @@ function DropdownMenuGroup({ ...props }) {
 }
 const dropdownMenuItemVariants = cva([
 	"relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-2 outline-hidden select-none",
+	"max-md:min-h-11",
 	"type-text-sm font-semibold",
 	"mx-1.5 my-px",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/dist/components/form.mjs

@@ -218,7 +218,7 @@ function RadioField({ control, name, rules, required, label, description, toolti
 							disabled: option.disabled
 						}), /* @__PURE__ */ jsx(Label, {
 							htmlFor: itemId,
-							className: "type-text-sm font-normal",
+							className: "type-text-sm font-normal max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:pl-2",
 							children: option.label
 						})]
 					}, option.value);
@@ -251,16 +251,17 @@ function ChecklistField({ control, name, rules, required, label, description, to
 					onBlur: field.onBlur,
 					children: options.map((option) => {
 						const itemId = `${field.name}-${option.value}`;
+						const checked = selected.includes(option.value);
 						return /* @__PURE__ */ jsxs("div", {
 							className: "flex items-start gap-2",
 							children: [/* @__PURE__ */ jsx(Checkbox, {
 								id: itemId,
-								checked: selected.includes(option.value),
+								checked,
 								onCheckedChange: (next) => toggle(option.value, Boolean(next)),
 								disabled: option.disabled
 							}), /* @__PURE__ */ jsx(Label, {
 								htmlFor: itemId,
-								className: "type-text-sm font-normal leading-tight",
+								className: "type-text-sm font-normal leading-tight max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:items-start max-md:pl-2",
 								children: option.label
 							})]
 						}, option.value);
@@ -287,7 +288,7 @@ function CheckboxField({ control, name, rules, label, description, tooltip }) {
 						onBlur: field.onBlur
 					}) }), label && /* @__PURE__ */ jsx(FormLabel, {
 						tooltip,
-						className: "font-normal",
+						className: "font-normal max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:items-start max-md:pl-2",
 						children: label
 					})]
 				}),

package/dist/components/heatmap-chart.mjs

@@ -85,7 +85,7 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 		if (colorScale === "rank") {
 			const sorted = [...new Set(cells.map((cell) => cell.value).filter((value) => value > 0))].sort((lower, upper) => lower - upper);
 			const RANK_FLOOR = .18;
-			const fractionByValue = new Map(sorted.map((value, index) => [value, sorted.length > 1 ? RANK_FLOOR + (1 - RANK_FLOOR) * (index / (sorted.length - 1)) : 1]));
+			const fractionByValue = new Map(sorted.map((value, index) => [value, sorted.length > 1 ? RANK_FLOOR + .8200000000000001 * (index / (sorted.length - 1)) : 1]));
 			return (value) => value > 0 ? fractionByValue.get(value) ?? 0 : 0;
 		}
 		return (value) => maxValue > 0 ? value / maxValue : 0;

package/dist/components/input.mjs

@@ -45,6 +45,23 @@ function Input({ className, id, label, required, hint, error, tooltip, leadingTe
 		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
 		...props
 	});
+	const wrappedInput = hasAddons ? /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center w-full overflow-hidden", sizes.wrapper, "bg-background border border-border rounded-md", "transition-colors", "has-[input:focus-visible]:border-ring has-[input:focus-visible]:border-2", "has-[input:disabled]:bg-disabled has-[input:disabled]:text-disabled-foreground has-[input:disabled]:cursor-not-allowed", error && "border-border-error"),
+		children: [
+			leadingIcon && /* @__PURE__ */ jsx("span", {
+				className: cn("flex items-center text-subtle-foreground [&_svg]:shrink-0", sizes.leadingIcon),
+				children: leadingIcon
+			}),
+			leadingText && /* @__PURE__ */ jsx("span", {
+				className: cn("flex items-center text-subtle-foreground whitespace-nowrap border-r border-border self-stretch", sizes.leadingText),
+				children: leadingText
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-1 items-center min-w-0", sizes.inner),
+				children: inputElement
+			})
+		]
+	}) : inputElement;
 	return /* @__PURE__ */ jsx(Field, {
 		fieldId,
 		label,
@@ -52,23 +69,7 @@ function Input({ className, id, label, required, hint, error, tooltip, leadingTe
 		hint,
 		error,
 		tooltip,
-		children: hasAddons ? /* @__PURE__ */ jsxs("div", {
-			className: cn("flex items-center w-full overflow-hidden", sizes.wrapper, "bg-background border border-border rounded-md", "transition-colors", "has-[input:focus-visible]:border-ring has-[input:focus-visible]:border-2", "has-[input:disabled]:bg-disabled has-[input:disabled]:text-disabled-foreground has-[input:disabled]:cursor-not-allowed", error && "border-border-error"),
-			children: [
-				leadingIcon && /* @__PURE__ */ jsx("span", {
-					className: cn("flex items-center text-subtle-foreground [&_svg]:shrink-0", sizes.leadingIcon),
-					children: leadingIcon
-				}),
-				leadingText && /* @__PURE__ */ jsx("span", {
-					className: cn("flex items-center text-subtle-foreground whitespace-nowrap border-r border-border self-stretch", sizes.leadingText),
-					children: leadingText
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: cn("flex flex-1 items-center min-w-0", sizes.inner),
-					children: inputElement
-				})
-			]
-		}) : inputElement
+		children: wrappedInput
 	});
 }
 //#endregion

package/dist/components/scroll-area.mjs

@@ -6,7 +6,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 function ScrollArea({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
 		"data-slot": "scroll-area",
-		className: cn("relative", className),
+		className: cn("relative min-w-0", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {

package/dist/components/select.mjs

@@ -56,7 +56,7 @@ function SelectLabel({ className, ...props }) {
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
 		"data-slot": "select-item",
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none", "type-text-md font-medium text-foreground mx-1 my-px", "[@media(hover:hover)]:hover:bg-background-hover", "focus:bg-background-hover", "data-[disabled]:pointer-events-none data-[disabled]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none", "max-md:min-h-11", "type-text-md font-medium text-foreground mx-1 my-px", "[@media(hover:hover)]:hover:bg-background-hover", "focus:bg-background-hover", "data-[disabled]:pointer-events-none data-[disabled]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute right-2 flex size-4 items-center justify-center",

package/dist/components/sidebar.mjs

@@ -12,7 +12,7 @@ import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 //#region src/components/sidebar.tsx
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
+const SIDEBAR_COOKIE_MAX_AGE = 604800;
 const SIDEBAR_WIDTH = "15rem";
 const SIDEBAR_WIDTH_MOBILE = "16rem";
 const SIDEBAR_WIDTH_ICON = "3.5rem";

package/dist/components/switch.mjs

@@ -6,7 +6,7 @@ import * as SwitchPrimitive from "@radix-ui/react-switch";
 function Switch({ className, ...props }) {
 	return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
 		"data-slot": "switch",
-		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full p-0.5", "bg-subtle data-[state=checked]:not-disabled:bg-primary", "transition-colors", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:pointer-events-none disabled:opacity-50", className),
+		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full p-0.5", "max-md:relative max-md:before:absolute max-md:before:top-1/2 max-md:before:left-1/2 max-md:before:size-11 max-md:before:-translate-x-1/2 max-md:before:-translate-y-1/2 max-md:before:content-['']", "bg-subtle data-[state=checked]:not-disabled:bg-primary", "transition-colors", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:pointer-events-none disabled:opacity-50", className),
 		...props,
 		children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
 			"data-slot": "switch-thumb",

package/dist/components/table.mjs

@@ -43,14 +43,14 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-11 px-6 py-3 bg-muted text-left align-middle type-text-xs font-semibold text-placeholder dark:text-subtle-foreground whitespace-nowrap", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0", className),
+		className: cn("h-11 px-6 max-md:px-3 py-3 bg-muted text-left align-middle type-text-xs font-semibold text-placeholder dark:text-subtle-foreground whitespace-nowrap", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0", className),
 		...props
 	});
 }
 function TableCell({ className, interactive = false, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("align-middle", interactive ? "h-px p-0" : "px-6 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0", className),
+		className: cn("align-middle", interactive ? "h-px p-0" : "px-6 max-md:px-3 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0", className),
 		...props
 	});
 }

package/dist/components/tabs.mjs

@@ -15,13 +15,13 @@ const tabsTriggerVariants = cva([
 	variants: { variant: {
 		default: ["rounded-md border border-transparent px-2 py-1", "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"],
 		line: [
-			"h-8 pb-3 px-1",
+			"h-8 max-md:min-h-11 pb-3 px-1",
 			"text-quaternary-foreground",
 			"[@media(hover:hover)]:hover:text-muted-foreground-hover",
 			"data-[state=active]:border-b-2 data-[state=active]:border-foreground data-[state=active]:text-foreground"
 		],
 		pill: [
-			"rounded-md px-2 py-1.5",
+			"rounded-md max-md:min-h-11 px-2 py-1.5",
 			"text-quaternary-foreground",
 			"[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-muted-foreground",
 			"data-[state=active]:bg-accent data-[state=active]:text-muted-foreground"
@@ -41,7 +41,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
 const TabsListVariantContext = createContext("default");
 const tabsListVariants = cva("inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:flex-col", {
 	variants: { variant: {
-		default: "rounded-lg bg-muted p-[3px] group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:bg-transparent group-data-[orientation=vertical]/tabs:p-0 group-data-[orientation=vertical]/tabs:rounded-none",
+		default: "rounded-lg bg-muted p-[3px] group-data-[orientation=horizontal]/tabs:h-9 max-md:group-data-[orientation=horizontal]/tabs:h-11 group-data-[orientation=vertical]/tabs:bg-transparent group-data-[orientation=vertical]/tabs:p-0 group-data-[orientation=vertical]/tabs:rounded-none",
 		line: "gap-3 rounded-none bg-transparent border-b border-subtle group-data-[orientation=horizontal]/tabs:flex-wrap"
 	} },
 	defaultVariants: { variant: "default" }

package/dist/components/textarea.mjs

@@ -7,6 +7,15 @@ import * as React$1 from "react";
 function Textarea({ className, id, label, required, hint, error, tooltip, ...props }) {
 	const generatedId = React$1.useId();
 	const fieldId = id ?? generatedId;
+	const textarea = /* @__PURE__ */ jsx("textarea", {
+		id: fieldId,
+		"data-slot": "textarea",
+		className: cn("block w-full min-h-[120px] max-h-[480px] resize-y [field-sizing:content]", "px-3.5 py-3", "type-text-md text-foreground placeholder:text-placeholder", "bg-background border border-border rounded-md", "transition-colors", "outline-none focus-visible:border-ring focus-visible:border-2", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed", "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error", error && "border-border-error [@media(hover:hover)]:hover:border-border-error", className),
+		required,
+		"aria-invalid": error ? true : void 0,
+		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
+		...props
+	});
 	return /* @__PURE__ */ jsx(Field, {
 		fieldId,
 		label,
@@ -14,15 +23,7 @@ function Textarea({ className, id, label, required, hint, error, tooltip, ...pro
 		hint,
 		error,
 		tooltip,
-		children: /* @__PURE__ */ jsx("textarea", {
-			id: fieldId,
-			"data-slot": "textarea",
-			className: cn("block w-full min-h-[120px] max-h-[480px] resize-y [field-sizing:content]", "px-3.5 py-3", "type-text-md text-foreground placeholder:text-placeholder", "bg-background border border-border rounded-md", "transition-colors", "outline-none focus-visible:border-ring focus-visible:border-2", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed", "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error", error && "border-border-error [@media(hover:hover)]:hover:border-border-error", className),
-			required,
-			"aria-invalid": error ? true : void 0,
-			"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
-			...props
-		})
+		children: textarea
 	});
 }
 //#endregion

package/dist/components/toggle-group.mjs

@@ -27,8 +27,8 @@ const toggleGroupItemVariants = cva([
 			].join(" ")
 		},
 		size: {
-			default: "h-8 px-2 min-w-8",
-			sm: "h-7 px-1.5 min-w-7"
+			default: "h-8 max-md:min-h-11 px-2 min-w-8",
+			sm: "h-7 max-md:min-h-11 px-1.5 min-w-7"
 		}
 	},
 	defaultVariants: {

package/dist/hooks/use-mobile.mjs

@@ -1,10 +1,9 @@
 import * as React$1 from "react";
 //#region src/hooks/use-mobile.ts
-const MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
 	const [isMobile, setIsMobile] = React$1.useState(void 0);
 	React$1.useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const mql = window.matchMedia(`(max-width: 767px)`);
 		const onChange = () => setIsMobile(mql.matches);
 		mql.addEventListener("change", onChange);
 		setIsMobile(mql.matches);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.168.1",
+  "version": "1.169.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/breadcrumb.tsx

@@ -31,6 +31,7 @@ function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"
       data-slot="breadcrumb-link"
       className={cn(
         "type-text-sm font-medium text-subtle-foreground transition-colors [@media(hover:hover)]:hover:text-muted-foreground",
+        "inline-flex items-center max-md:min-h-11",
         className,
       )}
       {...props}

package/src/components/button.tsx

@@ -11,6 +11,7 @@ const buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-1 whitespace-nowrap",
     "h-8 px-2 rounded-md",
+    "max-md:min-h-11",
     "font-medium",
     "transition-colors",
     "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
@@ -31,13 +32,13 @@ const buttonVariants = cva(
           "focus-visible:bg-background",
         ].join(" "),
         link: [
-          "h-auto px-0 rounded-xs underline-offset-4",
+          "h-auto max-md:min-h-0 px-0 rounded-xs underline-offset-4",
           "text-link",
           "[@media(hover:hover)]:hover:underline",
           "focus-visible:bg-background",
         ].join(" "),
         "link-muted": [
-          "h-auto px-0 rounded-xs underline-offset-4",
+          "h-auto max-md:min-h-0 px-0 rounded-xs underline-offset-4",
           "text-link-muted",
           "[@media(hover:hover)]:hover:underline",
           "focus-visible:bg-background",
@@ -56,8 +57,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "type-text-sm",
-        icon: "size-8 p-0 type-text-sm",
-        "icon-rounded": "size-8 p-0 rounded-full type-text-sm",
+        icon: "size-8 max-md:min-w-11 p-0 type-text-sm",
+        "icon-rounded": "size-8 max-md:min-w-11 p-0 rounded-full type-text-sm",
         pill: "h-7 px-3 rounded-full type-text-xs",
       },
     },

package/src/components/dialog.tsx

@@ -77,6 +77,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
             data-slot="dialog-close"
             className={cn(
               "absolute top-3 right-4 flex size-8 items-center justify-center rounded-md",
+              "max-md:before:absolute max-md:before:top-1/2 max-md:before:left-1/2 max-md:before:size-11 max-md:before:-translate-x-1/2 max-md:before:-translate-y-1/2 max-md:before:content-['']",
               "text-subtle-foreground transition-colors",
               "[@media(hover:hover)]:hover:text-foreground",
               "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",

package/src/components/dropdown-menu.tsx

@@ -54,6 +54,7 @@ function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMen
 const dropdownMenuItemVariants = cva(
   [
     "relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-2 outline-hidden select-none",
+    "max-md:min-h-11",
     "type-text-sm font-semibold",
     "mx-1.5 my-px",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/src/components/form.tsx

@@ -362,7 +362,10 @@ function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TF
                 return (
                   <div key={option.value} className="flex items-center gap-2">
                     <RadioGroupItem id={itemId} value={option.value} disabled={option.disabled} />
-                    <Label htmlFor={itemId} className="type-text-sm font-normal">
+                    <Label
+                      htmlFor={itemId}
+                      className="type-text-sm font-normal max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:pl-2"
+                    >
                       {option.label}
                     </Label>
                   </div>
@@ -427,7 +430,10 @@ function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPat
                         onCheckedChange={(next) => toggle(option.value, Boolean(next))}
                         disabled={option.disabled}
                       />
-                      <Label htmlFor={itemId} className="type-text-sm font-normal leading-tight">
+                      <Label
+                        htmlFor={itemId}
+                        className="type-text-sm font-normal leading-tight max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:items-start max-md:pl-2"
+                      >
                         {option.label}
                       </Label>
                     </div>
@@ -470,7 +476,10 @@ function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath
               />
             </FormControl>
             {label && (
-              <FormLabel tooltip={tooltip} className="font-normal">
+              <FormLabel
+                tooltip={tooltip}
+                className="font-normal max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:items-start max-md:pl-2"
+              >
                 {label}
               </FormLabel>
             )}

package/src/components/scroll-area.tsx

@@ -7,7 +7,7 @@ import { cn } from "../lib/cn";
 
 function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
   return (
-    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative min-w-0", className)} {...props}>
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
         className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring"

package/src/components/select.tsx

@@ -101,6 +101,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
       data-slot="select-item"
       className={cn(
         "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none",
+        "max-md:min-h-11",
         "type-text-md font-medium text-foreground mx-1 my-px",
         "[@media(hover:hover)]:hover:bg-background-hover",
         "focus:bg-background-hover",

package/src/components/switch.tsx

@@ -11,6 +11,7 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
       data-slot="switch"
       className={cn(
         "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full p-0.5",
+        "max-md:relative max-md:before:absolute max-md:before:top-1/2 max-md:before:left-1/2 max-md:before:size-11 max-md:before:-translate-x-1/2 max-md:before:-translate-y-1/2 max-md:before:content-['']",
         "bg-subtle data-[state=checked]:not-disabled:bg-primary",
         "transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",

package/src/components/table.tsx

@@ -65,7 +65,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-11 px-6 py-3 bg-muted text-left align-middle type-text-xs font-semibold text-placeholder dark:text-subtle-foreground whitespace-nowrap",
+        "h-11 px-6 max-md:px-3 py-3 bg-muted text-left align-middle type-text-xs font-semibold text-placeholder dark:text-subtle-foreground whitespace-nowrap",
         "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0",
         className,
       )}
@@ -85,7 +85,7 @@ function TableCell({ className, interactive = false, ...props }: TableCellProps)
       data-slot="table-cell"
       className={cn(
         "align-middle",
-        interactive ? "h-px p-0" : "px-6 py-2",
+        interactive ? "h-px p-0" : "px-6 max-md:px-3 py-2",
         "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:px-0",
         className,
       )}

package/src/components/tabs.tsx

@@ -25,13 +25,13 @@ const tabsTriggerVariants = cva(
           "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
         ],
         line: [
-          "h-8 pb-3 px-1",
+          "h-8 max-md:min-h-11 pb-3 px-1",
           "text-quaternary-foreground",
           "[@media(hover:hover)]:hover:text-muted-foreground-hover",
           "data-[state=active]:border-b-2 data-[state=active]:border-foreground data-[state=active]:text-foreground",
         ],
         pill: [
-          "rounded-md px-2 py-1.5",
+          "rounded-md max-md:min-h-11 px-2 py-1.5",
           "text-quaternary-foreground",
           "[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-muted-foreground",
           "data-[state=active]:bg-accent data-[state=active]:text-muted-foreground",
@@ -71,7 +71,7 @@ const tabsListVariants = cva(
     variants: {
       variant: {
         default:
-          "rounded-lg bg-muted p-[3px] group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:bg-transparent group-data-[orientation=vertical]/tabs:p-0 group-data-[orientation=vertical]/tabs:rounded-none",
+          "rounded-lg bg-muted p-[3px] group-data-[orientation=horizontal]/tabs:h-9 max-md:group-data-[orientation=horizontal]/tabs:h-11 group-data-[orientation=vertical]/tabs:bg-transparent group-data-[orientation=vertical]/tabs:p-0 group-data-[orientation=vertical]/tabs:rounded-none",
         line: "gap-3 rounded-none bg-transparent border-b border-subtle group-data-[orientation=horizontal]/tabs:flex-wrap",
       },
     },
@@ -183,7 +183,6 @@ function TabsNavTrigger({
         className={cn(
           tabsTriggerVariants({ variant }),
           "flex transition-colors",
-          // TODO(mobile): line h-8 (32px) is below 44px touch target minimum — desktop-primary nav per Figma spec
           variant === "line" && "cursor-pointer",
           className,
         )}

package/src/components/toggle-group.tsx

@@ -30,8 +30,8 @@ const toggleGroupItemVariants = cva(
         ].join(" "),
       },
       size: {
-        default: "h-8 px-2 min-w-8",
-        sm: "h-7 px-1.5 min-w-7",
+        default: "h-8 max-md:min-h-11 px-2 min-w-8",
+        sm: "h-7 max-md:min-h-11 px-1.5 min-w-7",
       },
     },
     defaultVariants: {