@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/fields/Geolocation/index.tsx

@@ -35,7 +35,6 @@ export type GeolocationProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
   };
 
 export function Geolocation<
@@ -68,7 +67,6 @@ export function Geolocation<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/HTML/Html.spec.tsx

@@ -161,19 +161,17 @@ describe("registry resolution (HTML fieldtype)", () => {
     expect(element.props.value).toBe("");
   });
 
-  it("passes helperText / readOnly / skeleton / compact through", () => {
+  it("passes helperText / readOnly / skeleton through", () => {
     const Component = getFieldComponent("HTML")!;
     const element = (Component as Function)(
       propsFor({
         helperText: "rendered server-side",
         readOnly: true,
         skeleton: true,
-        compact: true,
       }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("rendered server-side");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/HTML/Html.stories.tsx

@@ -68,7 +68,7 @@ export const ContractProbe = (args: StoryProps) => (
       helperText="help"
     />
     <Html {...(args as any)} label="skeleton probe" skeleton />
-    <Html {...(args as any)} label="compact probe" compact value="<p>Compact</p>" />
+    <Html {...(args as any)} label="compact probe" size="$3" value="<p>Compact</p>" />
   </YStack>
 );
 ContractProbe.args = { value: "<p>Probe content</p>" } as Partial<StoryProps>;

package/src/fields/HTML/index.tsx

@@ -3,7 +3,7 @@
  * Design-law: compose FieldLayout; inherit body metrics (no 14px / 1px fork).
  */
 import { FieldLayout, Skeleton, formCommonColors } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { Text, View, YStack, type YStackProps } from "tamagui";
 
@@ -17,7 +17,6 @@ export interface HtmlProps extends Omit<YStackProps, "children"> {
   required?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
 }
 
 const FORBIDDEN_TAGS = new Set([
@@ -126,17 +125,17 @@ export function Html({
   required = false,
   readOnly: _readOnly,
   skeleton = false,
-  compact = false,
   ...stackProps
 }: HtmlProps) {
   const { knobProps } = useResolvedKnobs();
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const sanitizedHtml = useMemo(() => sanitizeHtml(value), [value]);
 
   if (skeleton) {
     return (
       <YStack {...stackProps}>
         <FieldLayout label={label} required={required}>
-          <Skeleton variant="rounded" width="100%" height={compact ? 40 : 60} />
+          <Skeleton variant="rounded" width="100%" height={small ? 40 : 60} />
         </FieldLayout>
       </YStack>
     );
@@ -151,21 +150,21 @@ export function Html({
         required={required}
         disabled={disabled}
       >
-      <YStack
-        {...knobProps.cardSurface}
-        {...knobProps.body}
-        opacity={disabled ? 0.6 : 1}
-        minHeight={compact ? 40 : 60}
-      >
-        {sanitizedHtml ? (
-          <HtmlContent html={sanitizedHtml} />
-        ) : (
-          <Text color={formCommonColors.muted} {...knobProps.body}>
-            No content
-          </Text>
-        )}
-      </YStack>
-    </FieldLayout>
+        <YStack
+          {...knobProps.cardSurface}
+          {...knobProps.body}
+          opacity={disabled ? 0.6 : 1}
+          minHeight={small ? 40 : 60}
+        >
+          {sanitizedHtml ? (
+            <HtmlContent html={sanitizedHtml} />
+          ) : (
+            <Text color={formCommonColors.muted} {...knobProps.body}>
+              No content
+            </Text>
+          )}
+        </YStack>
+      </FieldLayout>
     </YStack>
   );
 }

package/src/fields/Heading/Heading.stories.tsx

@@ -43,7 +43,7 @@ Default.args = {
 Default.storyName = "Main";
 export const Collapsible = () => {
   return (
-    <YStack gap="$4" width={500}>
+    <YStack gap="$4" width={500} maxWidth="100%">
       <Heading
         label="Personal Information"
         description="Click to expand/collapse"
@@ -73,7 +73,7 @@ export const FormWithSections = () => {
   const [newsletter, setNewsletter] = useState(false);
 
   return (
-    <YStack gap="$4" width={500}>
+    <YStack gap="$4" width={500} maxWidth="100%">
       <Heading label="Personal Information" level={2} showSeparator collapsible>
         <YStack gap="$3" paddingTop="$3">
           <Data label="First Name" value={firstName} onChange={(v) => setFirstName(v)} required />

package/src/fields/Heading/index.tsx

@@ -1,6 +1,6 @@
 import { useRegisterPageHeading } from "@multiplatform.one/components";
 import { Skeleton } from "@multiplatform.one/forms";
-import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useId, useState } from "react";
 import {
@@ -38,7 +38,6 @@ export interface HeadingProps extends Omit<YStackProps, "children"> {
   onCollapseChange?: (collapsed: boolean) => void;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
 }
 
 // Explicit per-level sizes (matching the default $heading scale: H1 $8 / H2 $6
@@ -73,10 +72,10 @@ export function Heading({
   onCollapseChange,
   readOnly: _readOnly,
   skeleton = false,
-  compact = false,
   ...stackProps
 }: HeadingProps) {
   const { knobProps } = useResolvedKnobs();
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const [isCollapsed, setIsCollapsed] = useState(collapsed ?? defaultCollapsed);
   useEffect(() => {
     if (collapsed !== undefined) setIsCollapsed(collapsed);
@@ -114,8 +113,8 @@ export function Heading({
   if (skeleton) {
     return (
       <YStack {...knobProps.gap} {...stackProps}>
-        <Skeleton variant="text" width="45%" height={compact ? 18 : 24} />
-        <Skeleton variant="text" width="70%" height={compact ? 12 : 14} />
+        <Skeleton variant="text" width="45%" height={small ? 18 : 24} />
+        <Skeleton variant="text" width="70%" height={small ? 12 : 14} />
         {showSeparator && (
           <Skeleton
             variant="rounded"
@@ -131,10 +130,10 @@ export function Heading({
   // Knob weight wins; 600 is only a fallback. Kept out of the spread and set
   // after the size props so no font-table weight (e.g. Inter's 300) beats it.
   const { fontWeight: knobHeadingWeight, ...knobHeadingFont } = knobProps.heading ?? {};
-  const headingFontSize = compact
+  const headingFontSize = small
     ? Math.max(16, levelFont[level].fontSize - 4)
     : levelFont[level].fontSize;
-  const headingLineHeight = compact
+  const headingLineHeight = small
     ? Math.max(22, levelFont[level].lineHeight - 6)
     : levelFont[level].lineHeight;
 
@@ -144,7 +143,7 @@ export function Heading({
       gap="$2"
       cursor={canCollapse ? "pointer" : "default"}
       onPress={handleToggle}
-      paddingVertical={compact ? "$1" : "$2"}
+      paddingVertical={small ? "$1" : "$2"}
       hoverStyle={canCollapse ? { opacity: 0.8 } : undefined}
       role={canCollapse ? "button" : undefined}
       tabIndex={canCollapse ? 0 : undefined}
@@ -186,7 +185,7 @@ export function Heading({
         )}
       </YStack>
       {showSeparator && (
-        <YStack paddingVertical={compact ? "$0.5" : "$1"}>
+        <YStack paddingVertical={small ? "$0.5" : "$1"}>
           <Separator backgroundColor="$color5" />
         </YStack>
       )}

package/src/fields/Icon/Icon.stories.tsx

@@ -25,7 +25,6 @@ export default {
     disabled: { control: "boolean", description: "Disable the field" },
     readOnly: { control: "boolean", description: "Render read-only" },
     required: { control: "boolean", description: "Mark as required" },
-    compact: { control: "boolean", description: "Compact (table cell) presentation" },
     options: { control: "text", description: "df.options — newline list narrowing the catalog" },
     error: { control: "text", description: "Error message to display" },
   },
@@ -54,7 +53,7 @@ Default.args = {
 Default.storyName = "Main";
 
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledIcon label="Default" placeholder="Choose an icon" />
     <ControlledIcon label="With Value" value="mail" />
     <ControlledIcon label="Required" required />
@@ -85,7 +84,7 @@ export const ViaRegistry = () => {
     throw new Error("fieldtype Icon is not registered — initDefaultRegistry() lost registerField");
   }
   return (
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <RegisteredIcon
         label="Workspace icon (through the registry)"
         value={value}

package/src/fields/Icon/index.tsx

@@ -34,7 +34,6 @@ export type IconProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     icons?: readonly string[];
     options?: string;
   };
@@ -74,7 +73,6 @@ export function Icon<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Link.tsx

@@ -19,12 +19,14 @@ import {
 import { Combobox, type ComboboxOption } from "@multiplatform.one/forms";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import type { YStackProps } from "tamagui";
+import type { SizeTokens, YStackProps } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
 import { LinkTree } from "./LinkTree";
 
-export interface LinkProps extends Omit<YStackProps, "children" | "onChange"> {
+export interface LinkProps extends Omit<YStackProps, "children" | "onChange" | "size"> {
   label?: string;
+  /** Control size token (Tamagui's own `size`, e.g. `"$3"` in a filter bar). */
+  size?: SizeTokens;
   value?: string;
   /** Canonical change handler (LC-14): fires with the picked document name. */
   onChange: (value: string) => void;
@@ -56,7 +58,6 @@ export interface LinkProps extends Omit<YStackProps, "children" | "onChange"> {
   helperText?: string;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   placeholder?: string;
   /** Results per page for the backend search (default 20) */
   pageLength?: number;
@@ -106,7 +107,6 @@ function LinkCombobox({
   helperText,
   readOnly = false,
   skeleton = false,
-  compact = false,
   placeholder,
   pageLength = 20,
   referenceDoctype,
@@ -200,7 +200,6 @@ function LinkCombobox({
       error={error}
       helperText={helperText}
       skeleton={skeleton}
-      compact={compact}
       creatable={allowCreate && !!onCreateNew}
       onCreate={handleCreate}
       createLabel={t("Create new {{doctype}}", { doctype })}

package/src/fields/LinkTree.stories.tsx

@@ -147,7 +147,7 @@ Default.storyName = "Main";
 
 export const AllStates = () =>
   host(
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <ControlledTree label="Default" />
       <ControlledTree label="With Value" value="North A" />
       <ControlledTree label="Required" required />
@@ -169,7 +169,7 @@ Empty.parameters = {
 
 export const Nested = () =>
   host(
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <ControlledTree label="Leaf, three levels deep" value="North A1" />
       <ControlledTree label="Branch, two levels deep" value="North A" />
     </YStack>,
@@ -186,7 +186,7 @@ Nested.parameters = {
 export const ViaLink = () => {
   const [value, setValue] = useState("North A");
   return host(
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <Link
         label="Region (through Link, is_tree)"
         doctype="QaRegion"

package/src/fields/LinkTree.tsx

@@ -30,7 +30,6 @@ export function LinkTree({
   helperText,
   readOnly = false,
   skeleton = false,
-  compact = false,
   placeholder,
   referenceDoctype: _referenceDoctype,
   ...stackProps
@@ -110,7 +109,6 @@ export function LinkTree({
       error={error}
       helperText={helperText}
       skeleton={skeleton}
-      compact={compact}
       loading={isLoading}
       {...(stackProps as Record<string, unknown>)}
     />

package/src/fields/LongText/index.tsx

@@ -38,7 +38,6 @@ export type LongTextProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     maxLength?: number;
     minHeight?: number;
     textAreaProps?: Record<string, unknown>;
@@ -81,7 +80,6 @@ export function LongText<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/MarkdownEditor/MarkdownEditor.spec.tsx

@@ -115,19 +115,17 @@ describe("registry resolution (Markdown Editor fieldtype)", () => {
     expect(element.props.label).toBe("Body");
   });
 
-  it("adapter passes helperText / readOnly / skeleton / compact through (passthrough parity)", () => {
+  it("adapter passes helperText / readOnly / skeleton through (passthrough parity)", () => {
     const Component = getFieldComponent("Markdown Editor")!;
     const element = (Component as Function)(
       propsFor({
         helperText: "GitHub-flavored markdown",
         readOnly: true,
         skeleton: true,
-        compact: true,
       }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("GitHub-flavored markdown");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -45,7 +45,6 @@ export default {
     disabled: { control: "boolean" },
     readOnly: { control: "boolean" },
     skeleton: { control: "boolean" },
-    compact: { control: "boolean" },
     minRows: { control: "number" },
     maxRows: { control: "number" },
   },
@@ -113,7 +112,7 @@ export const States = (args: StoryProps) => (
   <YStack gap="$5">
     <Controlled {...args} label="Error" error="Markdown body is required" />
     <Controlled {...args} label="Disabled" disabled />
-    <Controlled {...args} label="Compact" compact />
+    <Controlled {...args} label="Compact" size="$3" />
     <MarkdownEditorField label="Skeleton" skeleton onChange={() => {}} />
   </YStack>
 );

package/src/fields/MarkdownEditor/index.native.tsx

@@ -31,7 +31,7 @@ import { useEffect, useState, type ComponentType, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
 import { Paragraph, YStack } from "tamagui";
-import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { EditorPreviewPanes, PreviewSurface } from "../shared/EditorPreviewPanes";
 
 // ---------------------------------------------------------------------------
@@ -74,18 +74,17 @@ function useMarkdownRenderer(enabled: boolean): MarkdownComponent | null {
 
 interface MarkdownPreviewProps {
   value: string;
-  compact?: boolean;
 }
 
-function MarkdownPreview({ value, compact }: MarkdownPreviewProps) {
+function MarkdownPreview({ value }: MarkdownPreviewProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs();
   const Renderer = useMarkdownRenderer(!!value);
-  // Content type scale follows the size knob (same idiom as CodeBlock).
+  // Content type scale follows the size token (same idiom as CodeBlock).
   const textSize = knobProps.sizeToken as FontSizeTokens;
 
   return (
-    <PreviewSurface compact={compact}>
+    <PreviewSurface>
       {!value ? (
         <Paragraph color={formCommonColors.muted} size={textSize}>
           {t("Nothing to preview")}
@@ -118,7 +117,6 @@ export interface MarkdownEditorFieldProps {
   disabled?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   size?: SizeTokens;
   id?: string;
   value?: string;
@@ -146,7 +144,6 @@ export function MarkdownEditorField({
   disabled,
   readOnly,
   skeleton,
-  compact,
   size,
   id: idProp,
   value,
@@ -159,7 +156,8 @@ export function MarkdownEditorField({
   "aria-label": ariaLabel,
 }: MarkdownEditorFieldProps) {
   const { t } = useTranslation();
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const inTableCell = useIsInTableCell();
 
@@ -183,7 +181,7 @@ export function MarkdownEditorField({
             height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
           />
         )}
-        <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
+        <Skeleton variant="rounded" width="100%" height={small ? 120 : 200} />
       </YStack>
     );
   }
@@ -206,7 +204,6 @@ export function MarkdownEditorField({
       readOnly={readOnly}
       required={required}
       error={hasError ? true : undefined}
-      compact={compact}
       size={size}
       minRows={minRows}
       maxRows={maxRows}
@@ -231,10 +228,9 @@ export function MarkdownEditorField({
     return (
       <EditorPreviewPanes
         editor={renderSource(textValue, handleChange, hasError)}
-        preview={<MarkdownPreview value={textValue} compact={compact} />}
+        preview={<MarkdownPreview value={textValue} />}
         editTabLabel={t("Write")}
         previewTabLabel={t("Preview")}
-        compact={compact}
         defaultPreview={!!readOnly}
       />
     );

package/src/fields/MarkdownEditor/index.tsx

@@ -27,7 +27,7 @@ import {
   type AnyFormApi,
 } from "@multiplatform.one/forms";
 import { RichEditor, type RichEditorRef } from "@multiplatform.one/rich-text";
-import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, sizeTokenStep } from "@multiplatform.one/theme";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { YStack } from "tamagui";
@@ -47,7 +47,6 @@ export interface MarkdownEditorFieldProps {
   disabled?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   size?: SizeTokens;
   id?: string;
   value?: string;
@@ -75,7 +74,6 @@ export function MarkdownEditorField({
   disabled,
   readOnly,
   skeleton,
-  compact,
   size,
   id: idProp,
   value,
@@ -87,7 +85,8 @@ export function MarkdownEditorField({
   maxRows = 16,
   "aria-label": ariaLabel,
 }: MarkdownEditorFieldProps) {
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const inTableCell = useIsInTableCell();
 
@@ -119,7 +118,7 @@ export function MarkdownEditorField({
             height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
           />
         )}
-        <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
+        <Skeleton variant="rounded" width="100%" height={small ? 120 : 200} />
       </YStack>
     );
   }
@@ -147,7 +146,6 @@ export function MarkdownEditorField({
       maxHeight={maxRows * ROW_HEIGHT}
       hasError={hasError}
       size={size}
-      compact={compact || inTableCell}
       // Table cells stay chromeless: no fixed toolbar, bubble on selection.
       showToolbar={!inTableCell}
       showBubbleToolbar={inTableCell}

package/src/fields/MentionInput/index.tsx

@@ -61,7 +61,6 @@ export type MentionInputFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     mentions: MentionConfig[];
     placeholder?: string;
     onMentionSelect?: (mention: MentionItem, trigger: string) => void;
@@ -99,7 +98,6 @@ export function MentionInputField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Numeric/Numeric.hug.spec.tsx

@@ -0,0 +1,54 @@
+// A number with a unit is one short value: the hugging field sizes to the
+// value (a `ch` width the bounds decide) instead of stretching across the
+// column, and the unit sits after the value inside the control.
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import { Numeric } from "./index";
+
+afterEach(cleanup);
+
+function spinbutton(): HTMLInputElement {
+  return screen.getByRole("spinbutton") as HTMLInputElement;
+}
+
+describe("Numeric hug + unit", () => {
+  it("writes the unit after the value, inside the control", () => {
+    renderWithProviders(<Numeric type="Int" label="Weight" unit="hg" value={69} hug />);
+    const unit = screen.getByText("hg");
+    const box = spinbutton().closest("[data-stepper-control]");
+    expect(box).not.toBeNull();
+    expect(box?.contains(unit)).toBe(true);
+    // Trailing: the unit follows the value in document order.
+    expect(
+      spinbutton().compareDocumentPosition(unit) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("hugs its value: a ch width on the input, the field aligned to its start", () => {
+    renderWithProviders(<Numeric type="Int" label="Height" unit="dm" value={7} hug />);
+    expect(spinbutton().style.width).toMatch(/^\d+ch$/);
+    const field = document.querySelector("[data-field-hug='true']");
+    expect(field).not.toBeNull();
+    expect(field?.contains(spinbutton())).toBe(true);
+  });
+
+  it("reserves room for the widest bound", () => {
+    renderWithProviders(<Numeric type="Int" label="Base XP" value={64} min={0} max={100000} hug />);
+    const chars = Number.parseInt(spinbutton().style.width, 10);
+    expect(chars).toBeGreaterThanOrEqual(String(100000).length);
+  });
+
+  it("fits long saved and edited values without bounds", () => {
+    renderWithProviders(<Numeric type="Int" label="Count" value={123456789} hug />);
+    expect(Number.parseInt(spinbutton().style.width, 10)).toBeGreaterThanOrEqual(9);
+    fireEvent.change(spinbutton(), { target: { value: "123456789012" } });
+    expect(Number.parseInt(spinbutton().style.width, 10)).toBeGreaterThanOrEqual(12);
+  });
+
+  it("without hug the field keeps the column width", () => {
+    renderWithProviders(<Numeric type="Int" label="Height" value={7} />);
+    expect(spinbutton().style.width).toBe("");
+    expect(document.querySelector("[data-field-hug='true']")).toBeNull();
+  });
+});

package/src/fields/Numeric/index.tsx

@@ -47,12 +47,15 @@ export type NumericProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     min?: number;
     max?: number;
     step?: number;
     precision?: number;
     currencySymbol?: string;
+    /** Unit written after the value ("kg"). */
+    unit?: string;
+    /** Size the field to its value instead of the column. */
+    hug?: boolean;
     inputProps?: Record<string, unknown>;
   };
 
@@ -84,6 +87,8 @@ export function Numeric<
     step,
     precision,
     currencySymbol = "$",
+    unit,
+    hug,
     ...fieldProps
   } = useProps(props);
 
@@ -124,7 +129,6 @@ export function Numeric<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}
@@ -138,6 +142,8 @@ export function Numeric<
       mode={mode}
       preserveValue={preserveValue}
       inputProps={inputProps as any}
+      unit={unit}
+      hug={hug}
     />
   );
 

package/src/fields/OTPInput/OTPInput.spec.tsx

@@ -154,14 +154,13 @@ describe("registry resolution (OTP fieldtype)", () => {
     expect(element.props.value).toBe("");
   });
 
-  it("passes helperText / readOnly / skeleton / compact through", () => {
+  it("passes helperText / readOnly / skeleton through", () => {
     const Component = getFieldComponent("OTP")!;
     const element = (Component as Function)(
-      propsFor({ helperText: "check your texts", readOnly: true, skeleton: true, compact: true }),
+      propsFor({ helperText: "check your texts", readOnly: true, skeleton: true }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("check your texts");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });