@jobber/components 8.19.0 → 8.20.1

package/dist/primitives/InputNumberExperimental/index.d.ts

@@ -1,2 +1,2 @@
 export { InputNumberExperimental } from "./InputNumberExperimental";
-export type { InputNumberExperimentalAffix, InputNumberExperimentalProps, InputNumberExperimentalRef, } from "./types";
+export type { InputNumberExperimentalAffix, InputNumberExperimentalAutoComplete, InputNumberExperimentalDescriptionProps, InputNumberExperimentalErrorProps, InputNumberExperimentalFooterProps, InputNumberExperimentalGroupProps, InputNumberExperimentalInputProps, InputNumberExperimentalLabelProps, InputNumberExperimentalLoadingProps, InputNumberExperimentalProps, InputNumberExperimentalRef, InputNumberExperimentalStepButtonProps, InputNumberExperimentalStepperProps, InputNumberExperimentalSuffix, InputNumberExperimentalSuffixProp, InputNumberExperimentalWrapperProps, } from "./types";

package/dist/primitives/InputNumberExperimental/index.mjs

@@ -1,16 +1,16 @@
 export { I as InputNumberExperimental } from '../../InputNumberExperimental-es.js';
+import '../../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../../ActivityIndicator-es.js';
 import '../../Button-es.js';
-import '../../tslib.es6-es.js';
 import 'react-router-dom';
 import '../../Icon-es.js';
 import '@jobber/design';
 import '../../Typography-es.js';
-import '../../clamp-es.js';
 import '../../useRenderElement-es.js';
-import 'react-dom';
+import '../../clamp-es.js';
 import '../../floating-ui.utils.dom-es.js';
+import 'react-dom';
 import '../../NumberFieldInput-es.js';
 import 'react/jsx-runtime';

package/dist/primitives/InputNumberExperimental/types.d.ts

@@ -9,16 +9,11 @@ export interface InputNumberExperimentalStyleProps {
     readonly style?: CSSProperties;
 }
 /**
- * Affix descriptor used by the `prefix` and `suffix` props on
- * `<InputNumberExperimental>` for the default (drop-in) render.
- *
- * At least one of `label` or `icon` should be provided. Icons render outside
- * the input area (in the field's outer padding zone), labels render inside the
- * input wrapper directly adjacent to the typed value (matching V1).
- *
- * `onClick` and `ariaLabel` are not allowed in this shape; if you need a
- * clickable action, use `InputNumberExperimentalSuffix` instead (only valid
- * for `suffix`).
+ * Affix descriptor for the top-level `prefix`/`suffix` props. At least one of
+ * `label` or `icon` should be provided. Icons render outside the input area (in
+ * the field's outer padding zone); labels render inside the input area next to
+ * the typed value. `onClick`/`ariaLabel` are not allowed here; use
+ * `InputNumberExperimentalSuffix` for a clickable action.
  */
 export interface InputNumberExperimentalAffix {
     readonly label?: string;
@@ -28,8 +23,7 @@ export interface InputNumberExperimentalAffix {
 }
 /**
  * Suffix variant that turns the suffix icon into a clickable action button.
- * Mirrors V1's `Suffix` type. The `?: never` fields make this a discriminated
- * union with `InputNumberExperimentalAffix`.
+ * The `?: never` fields make this a discriminated union with the plain affix.
  */
 export interface InputNumberExperimentalSuffix {
     readonly label?: string;
@@ -37,46 +31,35 @@ export interface InputNumberExperimentalSuffix {
     readonly ariaLabel: string;
     onClick(): void;
 }
-/**
- * Tagged union for the `suffix` prop. Discriminated by whether `onClick` is set:
- * - omit `onClick` → behaves like `InputNumberExperimentalAffix`
- * - set `onClick`  → requires `icon` and `ariaLabel` (clickable action button)
- */
 export type InputNumberExperimentalSuffixProp = InputNumberExperimentalAffix | InputNumberExperimentalSuffix;
-export type InputNumberExperimentalAutocomplete = boolean | "on" | "off" | "one-time-code" | "address-line1" | "address-line2";
+export type InputNumberExperimentalAutoComplete = boolean | "on" | "off" | "one-time-code" | "address-line1" | "address-line2";
 export type InputNumberExperimentalSize = "small" | "default" | "large";
-export interface InputNumberExperimentalProps {
+/**
+ * Field configuration shared by `<InputNumberExperimental.Wrapper>` (the
+ * composition entry point) and the top-level `<InputNumberExperimental>` sugar.
+ * The Wrapper owns the field state and exposes it to the parts via context.
+ */
+export interface InputNumberExperimentalWrapperProps extends InputNumberExperimentalStyleProps {
     readonly align?: "center" | "right";
-    readonly autocomplete?: InputNumberExperimentalAutocomplete;
-    /**
-     * Optional compound children. When children include any
-     * `<InputNumberExperimental.Input | .Affix | .Stepper>`, the component renders
-     * them inside `NumberField.Root`/`NumberField.Group` and ignores `prefix`/`suffix`
-     * props. Without compound children, the component renders the default
-     * composition (input + animated mini-label + optional prefix/suffix + stepper).
-     */
+    readonly autoComplete?: InputNumberExperimentalAutoComplete;
+    /** Composed parts (`.Group`, `.Footer`, and the parts within them). */
     readonly children?: ReactNode;
-    readonly description?: ReactNode;
     readonly disabled?: boolean;
-    /** When set, renders a styled error message below the field. */
-    readonly error?: string;
     /**
-     * Number formatting for the displayed value, forwarded verbatim to Base UI
-     * `NumberField`'s native `format`. Accepts standard `Intl.NumberFormatOptions`
-     * (e.g. `{ style: "currency", currency: "USD" }` or `{ maximumFractionDigits: 2 }`).
-     * When omitted, typed decimals are preserved without premature rounding.
+     * Number formatting for the displayed value, forwarded to Base UI
+     * `NumberField`'s native `format`. When omitted, typed decimals are preserved.
      */
     readonly format?: Intl.NumberFormatOptions;
     readonly id?: string;
     /** Shrink-wrap the field to its content (auto width). */
     readonly inline?: boolean;
+    readonly inputMode?: "numeric" | "decimal";
     /** Style the error border without showing an error message. */
     readonly invalid?: boolean;
-    readonly keyboard?: "numeric" | "decimal";
     /**
-     * Shows a non-blocking loading indicator in the stepper's slot to signal
-     * background activity. The field stays editable while loading (use `readonly`
-     * or `disabled` to lock it); the stepper is hidden so the two never overlap.
+     * Shows a non-blocking loading indicator in the stepper's slot. The field
+     * stays editable (use `readOnly`/`disabled` to lock it); the stepper hides so
+     * the two never overlap.
      */
     readonly loading?: boolean;
     readonly max?: number;
@@ -86,29 +69,22 @@ export interface InputNumberExperimentalProps {
     readonly onBlur?: (event?: FocusEvent<HTMLInputElement>) => void;
     /**
      * Fires when the user commits a value (blur, Enter, stepper, arrow step).
-     * Use for side effects that shouldn't run per keystroke. Emits `undefined`
-     * when committed empty. For per-keystroke updates, see `onValueChange`.
+     * Emits `null` when committed empty. For per-keystroke updates use
+     * `onValueChange`.
      */
-    readonly onChange?: (newValue: number | undefined) => void;
+    readonly onValueCommitted?: (newValue: number | null) => void;
     /**
      * Fires on every parsed value change (typing, paste, stepper, arrow step).
-     * Emits `undefined` when the field is empty. Prefer `onChange` for side
-     * effects; reach for this only when UI must reflect in-progress input
-     * (e.g. a live-updating subtotal).
-     */
-    readonly onValueChange?: (newValue: number | undefined) => void;
-    /**
-     * Derived from `onKeyDown` — fires when the user presses Enter without
-     * any modifier keys (Shift/Ctrl/Meta).
+     * Emits `null` when the field is empty.
      */
+    readonly onValueChange?: (newValue: number | null) => void;
+    /** Fires when Enter is pressed without modifier keys (Shift/Ctrl/Meta). */
     readonly onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
     readonly onFocus?: (event?: FocusEvent<HTMLInputElement>) => void;
     readonly onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
     readonly onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;
-    readonly placeholder?: string;
-    readonly prefix?: InputNumberExperimentalAffix;
-    readonly readonly?: boolean;
-    /** Default `true`. When `false`, the floating mini-label is hidden. */
+    readonly readOnly?: boolean;
+    /** Default `true`. When `false`, the floating label is hidden. */
     readonly showMiniLabel?: boolean;
     readonly size?: InputNumberExperimentalSize;
     /**
@@ -116,27 +92,67 @@ export interface InputNumberExperimentalProps {
      * Default `1`.
      */
     readonly step?: number;
-    readonly suffix?: InputNumberExperimentalSuffixProp;
     /**
-     * Value of the field. Controlled-only — pair with `onChange` and drive from
-     * outside state.
-     *
-     * - `number` — controlled with that value.
-     * - `null` (or `undefined`) — controlled with an empty value. Useful for
-     *   controlled forms whose form-state default is empty/cleared.
+     * Controlled value. `number` sets the value; `null` (or `undefined`) is an
+     * empty field.
      */
     readonly value?: number | null;
 }
+/**
+ * Props for the top-level `<InputNumberExperimental>` sugar: the field
+ * configuration plus the convenience content props (`label`, `description`,
+ * `error`, `prefix`, `suffix`). It composes the parts internally — to compose
+ * the field yourself, use `<InputNumberExperimental.Wrapper>` and the parts.
+ */
+export interface InputNumberExperimentalProps extends Omit<InputNumberExperimentalWrapperProps, "children"> {
+    /** Floating field label. */
+    readonly label?: string;
+    readonly description?: ReactNode;
+    /** Renders a styled error message below the field. */
+    readonly error?: string;
+    readonly prefix?: InputNumberExperimentalAffix;
+    readonly suffix?: InputNumberExperimentalSuffixProp;
+}
 export interface InputNumberExperimentalRef {
     blur(): void;
     focus(): void;
 }
+export interface InputNumberExperimentalGroupProps extends InputNumberExperimentalStyleProps {
+    readonly children?: ReactNode;
+}
+export interface InputNumberExperimentalFooterProps extends InputNumberExperimentalStyleProps {
+    readonly children?: ReactNode;
+}
 export interface InputNumberExperimentalInputProps extends InputNumberExperimentalStyleProps {
-    /**
-     * Overrides the floating mini-label text. Falls back to the root component's
-     * `placeholder` prop when omitted.
-     */
-    readonly placeholder?: string;
+    /** Content rendered inside the input area (e.g. `.Label`, `.Stepper`). */
+    readonly children?: ReactNode;
+}
+export interface InputNumberExperimentalLabelProps extends InputNumberExperimentalStyleProps {
+    readonly children?: ReactNode;
+}
+export interface InputNumberExperimentalDescriptionProps extends InputNumberExperimentalStyleProps {
+    readonly children?: ReactNode;
+}
+export interface InputNumberExperimentalErrorProps extends InputNumberExperimentalStyleProps {
+    readonly children?: ReactNode;
+}
+export interface InputNumberExperimentalLoadingProps extends InputNumberExperimentalStyleProps {
+    /** Indicator content. Falls back to the default `ActivityIndicator`. */
+    readonly children?: ReactNode;
+}
+export interface InputNumberExperimentalStepperProps extends InputNumberExperimentalStyleProps {
+    /** Stepper buttons. Falls back to the default increment/decrement pair. */
+    readonly children?: ReactNode;
+    /** Accessible label for the increment button. Defaults to `Increase value`. */
+    readonly incrementLabel?: string;
+    /** Accessible label for the decrement button. Defaults to `Decrease value`. */
+    readonly decrementLabel?: string;
+}
+export interface InputNumberExperimentalStepButtonProps extends InputNumberExperimentalStyleProps {
+    /** Icon content. Falls back to the default Atlantis stepper icon. */
+    readonly children?: ReactNode;
+    /** Accessible label for the button. */
+    readonly ariaLabel?: string;
 }
 export interface InputNumberExperimentalAffixCompound extends InputNumberExperimentalStyleProps {
     readonly variation: "prefix" | "suffix";
@@ -157,24 +173,8 @@ export interface InputNumberExperimentalAffixCompoundClickable extends InputNumb
     readonly children?: ReactNode;
 }
 /**
- * Compound `.Affix` props. Discriminated by whether `onClick` is set:
- * - omit `onClick` -> behaves like `InputNumberExperimentalAffixCompound`
+ * `.Affix` props. Discriminated by whether `onClick` is set:
+ * - omit `onClick` -> behaves like a plain affix
  * - set `onClick`  -> requires `icon` and `ariaLabel` (clickable icon-button)
- *
- * Unlike the default `prefix`/`suffix` API, the compound version does not
- * structurally split label and icon; compose two `.Affix` elements or fall
- * back to the default API when you need that.
  */
 export type InputNumberExperimentalAffixCompoundProps = InputNumberExperimentalAffixCompound | InputNumberExperimentalAffixCompoundClickable;
-export interface InputNumberExperimentalStepperCompoundProps extends InputNumberExperimentalStyleProps {
-    /**
-     * Override the increment button's accessible label.
-     * Defaults to `Increase ${placeholder ?? "value"}`.
-     */
-    readonly incrementLabel?: string;
-    /**
-     * Override the decrement button's accessible label.
-     * Defaults to `Decrease ${placeholder ?? "value"}`.
-     */
-    readonly decrementLabel?: string;
-}

package/dist/primitives/index.cjs

@@ -16,8 +16,8 @@ require('@jobber/design');
 require('../Typography-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
 require('../clamp-cjs.js');
-require('react-dom');
 require('../floating-ui.utils.dom-cjs.js');
+require('react-dom');
 require('react/jsx-runtime');
 require('../index.esm-cjs.js');
 require('../Text-cjs.js');

package/dist/primitives/index.mjs

@@ -14,8 +14,8 @@ import '@jobber/design';
 import '../Typography-es.js';
 import '../ScrollAreaViewport-es.js';
 import '../clamp-es.js';
-import 'react-dom';
 import '../floating-ui.utils.dom-es.js';
+import 'react-dom';
 import 'react/jsx-runtime';
 import '../index.esm-es.js';
 import '../Text-es.js';

package/dist/unstyledPrimitives/index.cjs

@@ -892,7 +892,7 @@ function AriaCombobox(props) {
       }
       itemValue = valuesRef.current[activeIndex];
     }
-    const targetEl = ScrollAreaViewport.getTarget(event);
+    const targetEl = clamp.getTarget(event);
     const overrideEvent = selectionEventRef.current ?? event;
     selectionEventRef.current = null;
     const eventDetails = clamp.createChangeEventDetails(clamp.itemPress, overrideEvent);
@@ -1202,8 +1202,8 @@ function AriaCombobox(props) {
     // Without a popup, let the Escape key bubble the event up to other popups' handlers.
     bubbles: inline ? true : undefined,
     outsidePress(event) {
-      const target = ScrollAreaViewport.getTarget(event);
-      return !ScrollAreaViewport.contains(triggerElement, target) && !ScrollAreaViewport.contains(clearRef.current, target) && !ScrollAreaViewport.contains(chipsContainerRef.current, target) && !ScrollAreaViewport.contains(inputGroupElement, target);
+      const target = clamp.getTarget(event);
+      return !clamp.contains(triggerElement, target) && !clamp.contains(clearRef.current, target) && !clamp.contains(chipsContainerRef.current, target) && !clamp.contains(inputGroupElement, target);
     }
   });
   const listNavigation = MenuSubmenuTrigger.useListNavigation(floatingRootContext, {
@@ -1671,7 +1671,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
       },
       onBlur(event) {
         // If focus is moving into the popup, don't count it as a blur.
-        if (ScrollAreaViewport.contains(positionerElement, event.relatedTarget)) {
+        if (clamp.contains(positionerElement, event.relatedTarget)) {
           return;
         }
         setTouched(true);
@@ -1705,10 +1705,10 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
           if (!triggerElement) {
             return;
           }
-          const mouseUpTarget = ScrollAreaViewport.getTarget(mouseEvent);
+          const mouseUpTarget = clamp.getTarget(mouseEvent);
           const positioner = store.state.positionerElement;
           const list = store.state.listElement;
-          if (ScrollAreaViewport.contains(triggerElement, mouseUpTarget) || ScrollAreaViewport.contains(positioner, mouseUpTarget) || ScrollAreaViewport.contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
+          if (clamp.contains(triggerElement, mouseUpTarget) || clamp.contains(positioner, mouseUpTarget) || clamp.contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
             return;
           }
           const bounds = MenuSubmenuTrigger.getPseudoElementBounds(triggerElement);
@@ -2722,8 +2722,8 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       role: inputInsidePopup ? 'dialog' : 'presentation',
       tabIndex: -1,
       onFocus(event) {
-        const target = ScrollAreaViewport.getTarget(event.nativeEvent);
-        if (openMethod !== 'touch' && (ScrollAreaViewport.contains(store.state.listElement, target) || target === event.currentTarget)) {
+        const target = clamp.getTarget(event.nativeEvent);
+        if (openMethod !== 'touch' && (clamp.contains(store.state.listElement, target) || target === event.currentTarget)) {
           store.state.inputRef.current?.focus();
         }
       }
@@ -3852,7 +3852,7 @@ function useSwipeDismiss(options) {
   function getTargetAtPoint(position, nativeEvent) {
     const doc = clamp.ownerDocument(elementRef.current);
     const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
-    const target = elementAtPoint ?? ScrollAreaViewport.getTarget(nativeEvent);
+    const target = elementAtPoint ?? clamp.getTarget(nativeEvent);
     return target;
   }
   function findGestureScrollableTouchTarget(target, root) {
@@ -4043,7 +4043,7 @@ function useSwipeDismiss(options) {
     if (!enabled || !isSwipingRef.current) {
       return;
     }
-    const target = ScrollAreaViewport.getTarget(event.nativeEvent);
+    const target = clamp.getTarget(event.nativeEvent);
     if (isTouchLikeEvent(event) && !swipeFromScrollableRef.current) {
       const boundaryElement = event.currentTarget;
       if (findGestureScrollableTouchTarget(target, boundaryElement)) {
@@ -4244,7 +4244,7 @@ function useSwipeDismiss(options) {
             const doc = clamp.ownerDocument(element);
             const body = doc.body;
             const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
-            if (scrollTarget && (ScrollAreaViewport.contains(element, scrollTarget) || ScrollAreaViewport.contains(scrollTarget, element))) {
+            if (scrollTarget && (clamp.contains(element, scrollTarget) || clamp.contains(scrollTarget, element))) {
               const deltaX = currentPos.x - pendingStartPos.x;
               const deltaY = currentPos.y - pendingStartPos.y;
               const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
@@ -5108,7 +5108,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       }
       const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
       const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
-      if (!ScrollAreaViewport.contains(popupElement, anchorElement) && !ScrollAreaViewport.contains(popupElement, focusElement)) {
+      if (!clamp.contains(popupElement, anchorElement) && !clamp.contains(popupElement, focusElement)) {
         return;
       }
       selection.removeAllRanges();
@@ -5133,7 +5133,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       }
       const doc = popupElement.ownerDocument;
       const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
-      if (!elementAtPoint || !ScrollAreaViewport.contains(popupElement, elementAtPoint)) {
+      if (!elementAtPoint || !clamp.contains(popupElement, elementAtPoint)) {
         return false;
       }
       const nativeEvent = details.nativeEvent;
@@ -5624,7 +5624,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         const target = floatingUi_utils_dom.isElement(event.target) ? event.target : null;
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && ScrollAreaViewport.contains(rootElement, target)) {
+        if (rootElement && target && clamp.contains(rootElement, target)) {
           scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         }
@@ -5721,11 +5721,11 @@ function isTextSelectionControl(target) {
 function hasExpandedSelectionWithinTarget(selection, target) {
   const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
   const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
-  return selection.containsNode(target, true) || ScrollAreaViewport.contains(target, anchorElement) || ScrollAreaViewport.contains(target, focusElement);
+  return selection.containsNode(target, true) || clamp.contains(target, anchorElement) || clamp.contains(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
   const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && ScrollAreaViewport.contains(rootElement, activeElement));
+  const activeElementWithinRoot = Boolean(activeElement && clamp.contains(rootElement, activeElement));
   if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
     const {
       selectionStart,
@@ -7059,84 +7059,6 @@ function ComboboxRoot(props) {
   });
 }
 
-function useRegisteredLabelId(idProp, setLabelId) {
-  const id = clamp.useBaseUiId(idProp);
-  clamp.useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
-  return id;
-}
-
-function useLabel(params = {}) {
-  const {
-    id: idProp,
-    fallbackControlId,
-    native = false,
-    setLabelId: setLabelIdProp,
-    focusControl: focusControlProp
-  } = params;
-  const {
-    controlId: contextControlId,
-    setLabelId: setContextLabelId
-  } = NumberFieldInput.useLabelableContext();
-  const syncLabelId = clamp.useStableCallback(nextLabelId => {
-    setContextLabelId(nextLabelId);
-    setLabelIdProp?.(nextLabelId);
-  });
-  const id = useRegisteredLabelId(idProp, syncLabelId);
-  const resolvedControlId = contextControlId ?? fallbackControlId;
-  function focusControl(event) {
-    if (focusControlProp) {
-      focusControlProp(event, resolvedControlId);
-      return;
-    }
-    if (!resolvedControlId) {
-      return;
-    }
-    const controlElement = clamp.ownerDocument(event.currentTarget).getElementById(resolvedControlId);
-    if (floatingUi_utils_dom.isHTMLElement(controlElement)) {
-      focusElementWithVisible(controlElement);
-    }
-  }
-  function handleInteraction(event) {
-    const target = ScrollAreaViewport.getTarget(event.nativeEvent);
-    if (target?.closest('button,input,select,textarea')) {
-      return;
-    }
-
-    // Prevent text selection when double clicking label.
-    if (!event.defaultPrevented && event.detail > 1) {
-      event.preventDefault();
-    }
-    if (native) {
-      return;
-    }
-    focusControl(event);
-  }
-  return native ? {
-    id,
-    htmlFor: resolvedControlId ?? undefined,
-    onMouseDown: handleInteraction
-  } : {
-    id,
-    onClick: handleInteraction,
-    onPointerDown(event) {
-      event.preventDefault();
-    }
-  };
-}
-function focusElementWithVisible(element) {
-  element.focus({
-    // Available from Chrome 144+ (January 2026).
-    // Safari and Firefox already support it.
-    // @ts-expect-error not available in types yet
-    focusVisible: true
-  });
-}
-
 /**
  * An accessible label that is automatically associated with the combobox trigger.
  * Renders a `<div>` element.
@@ -7171,7 +7093,7 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       clamp.error(`${message}${ownerStackMessage}`);
     }, [inputElement, inputInsidePopup]);
   }
-  const labelProps = useLabel({
+  const labelProps = NumberFieldInput.useLabel({
     id: defaultLabelId,
     fallbackControlId: localControlId,
     setLabelId(nextLabelId) {

package/dist/unstyledPrimitives/index.mjs

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { h as useControlled, a as useStableCallback, i as useValueAsRef, c as useTransitionStatus, d as useIsoLayoutEffect, r as createGenericEventDetails, o as inputClear, m as inputChange, k as createChangeEventDetails, L as focusOut, Q as outsidePress, P as itemPress, e as useOpenChangeComplete, z as useValueChanged, n as none, a5 as inputPress, v as visuallyHiddenInput, l as visuallyHidden, a6 as pointer, b as useTimeout, y as useButton, s as ownerDocument, A as stopEvent, K as listNavigation, O as closePress, u as useBaseUiId, a3 as isAndroid, a7 as isFirefox, I as escapeKey, a8 as clearPress, t as transitionStatusMapping, U as imperativeAction, g as clamp, a9 as swipe, Y as useAnimationFrame, a1 as TransitionStatusDataAttributes, J as triggerHover, R as useAnimationsFinished, aa as SafeReact, ab as error, ac as chipRemovePress, ad as scrub, _ as isWebKit } from '../clamp-es.js';
-import { Z as createSelector, aq as useStore, a4 as useOpenInteractionType, h as getTarget, ag as useClick, a9 as useDismiss, ac as useInteractions, a2 as useOnFirstRender, ar as Store, n as contains, al as pressableTriggerOpenStateMapping, J as useDirection, ap as triggerOpenStateMapping, Q as FloatingPortal, M as popupStateMapping, a7 as useScrollLock, U as InternalBackdrop, V as inertValue, X as DROPDOWN_COLLISION_AVOIDANCE, O as FloatingFocusManager, L as useDialogRootContext, as as useDrawerProviderContext, at as DrawerBackdropCssVars, au as DrawerPopupCssVars, av as DrawerProviderContext, aw as CommonPopupDataAttributes, ax as useDialogPortalContext, ay as DialogStore, az as useDrawerRootContext, ao as useTriggerRegistration, aA as DrawerPopupDataAttributes, aB as useDrawerSnapPoints, aC as DrawerViewportContext, aD as BASE_UI_SWIPE_IGNORE_SELECTOR, aE as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, aF as useScrollAreaRootContext, aG as getOffset, aH as ScrollAreaRootCssVars, aI as scrollAreaStateAttributesMapping, aJ as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
+import { j as useControlled, a as useStableCallback, k as useValueAsRef, c as useTransitionStatus, d as useIsoLayoutEffect, x as createGenericEventDetails, r as inputClear, q as inputChange, m as createChangeEventDetails, _ as focusOut, a4 as outsidePress, g as getTarget, a3 as itemPress, f as useOpenChangeComplete, B as useValueChanged, n as none, ao as inputPress, v as visuallyHiddenInput, p as visuallyHidden, L as contains, ap as pointer, b as useTimeout, A as useButton, o as ownerDocument, C as stopEvent, W as listNavigation, a2 as closePress, u as useBaseUiId, am as isAndroid, aq as isFirefox, P as escapeKey, ar as clearPress, t as transitionStatusMapping, a7 as imperativeAction, i as clamp, as as swipe, aa as useAnimationFrame, ak as TransitionStatusDataAttributes, R as triggerHover, a5 as useAnimationsFinished, S as SafeReact, e as error, at as chipRemovePress, au as scrub, ac as isWebKit } from '../clamp-es.js';
+import { K as createSelector, ad as useStore, T as useOpenInteractionType, a3 as useClick, Y as useDismiss, $ as useInteractions, O as useOnFirstRender, ae as Store, a8 as pressableTriggerOpenStateMapping, v as useDirection, ac as triggerOpenStateMapping, A as FloatingPortal, y as popupStateMapping, W as useScrollLock, I as InternalBackdrop, E as inertValue, H as DROPDOWN_COLLISION_AVOIDANCE, z as FloatingFocusManager, x as useDialogRootContext, af as useDrawerProviderContext, ag as DrawerBackdropCssVars, ah as DrawerPopupCssVars, ai as DrawerProviderContext, aj as CommonPopupDataAttributes, ak as useDialogPortalContext, al as DialogStore, am as useDrawerRootContext, ab as useTriggerRegistration, an as DrawerPopupDataAttributes, ao as useDrawerSnapPoints, ap as DrawerViewportContext, aq as BASE_UI_SWIPE_IGNORE_SELECTOR, ar as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, as as useScrollAreaRootContext, at as getOffset, au as ScrollAreaRootCssVars, av as scrollAreaStateAttributesMapping, aw as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
 import { f as formatErrorMessage, d as EMPTY_ARRAY, a as useRefWithInit, b as useMergedRefs, N as NOOP, E as EMPTY_OBJECT, u as useRenderElement, m as mergeProps } from '../useRenderElement-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { a as useFormContext, b as useFieldRootContext, i as useLabelableId, j as useField, f as fieldValidityMapping, u as useLabelableContext, k as DEFAULT_FIELD_STATE_ATTRIBUTES, l as useNumberFieldRootContext, m as DEFAULT_STEP, s as stateAttributesMapping$9, h as NumberFieldDecrement, c as NumberFieldGroup, e as NumberFieldIncrement, d as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
+import { a as useFormContext, b as useFieldRootContext, j as useLabelableId, k as useField, f as fieldValidityMapping, u as useLabelableContext, l as DEFAULT_FIELD_STATE_ATTRIBUTES, c as useLabel, m as useNumberFieldRootContext, n as DEFAULT_STEP, s as stateAttributesMapping$9, i as NumberFieldDecrement, d as NumberFieldGroup, h as NumberFieldIncrement, e as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
 import { u as useFloatingRootContext, o as useListNavigation, p as useTypeahead, q as getPseudoElementBounds, C as CompositeList, r as useAnchorPositioning, s as getDisabledMountTransitionStyles, t as useCompositeListItem, I as IndexGuessBehavior, a as DrawerClose, D as DrawerTitle, v as useMenuRootContext, w as useMenuPositionerContext, x as useContextMenuRootContext, y as useMenuItem, R as REGULAR_ITEM, z as itemMapping, A as MenuStore, l as MenuGroup, n as MenuGroupLabel, c as MenuItem, b as MenuLinkItem, j as MenuPopup, h as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, d as MenuRadioItem, e as MenuRadioItemIndicator, g as MenuRoot, m as MenuSubmenuRoot, f as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
 import * as ReactDOM from 'react-dom';
 import { S as Separator } from '../Separator-es.js';
@@ -7037,84 +7037,6 @@ function ComboboxRoot(props) {
   });
 }
 
-function useRegisteredLabelId(idProp, setLabelId) {
-  const id = useBaseUiId(idProp);
-  useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [id, setLabelId]);
-  return id;
-}
-
-function useLabel(params = {}) {
-  const {
-    id: idProp,
-    fallbackControlId,
-    native = false,
-    setLabelId: setLabelIdProp,
-    focusControl: focusControlProp
-  } = params;
-  const {
-    controlId: contextControlId,
-    setLabelId: setContextLabelId
-  } = useLabelableContext();
-  const syncLabelId = useStableCallback(nextLabelId => {
-    setContextLabelId(nextLabelId);
-    setLabelIdProp?.(nextLabelId);
-  });
-  const id = useRegisteredLabelId(idProp, syncLabelId);
-  const resolvedControlId = contextControlId ?? fallbackControlId;
-  function focusControl(event) {
-    if (focusControlProp) {
-      focusControlProp(event, resolvedControlId);
-      return;
-    }
-    if (!resolvedControlId) {
-      return;
-    }
-    const controlElement = ownerDocument(event.currentTarget).getElementById(resolvedControlId);
-    if (isHTMLElement(controlElement)) {
-      focusElementWithVisible(controlElement);
-    }
-  }
-  function handleInteraction(event) {
-    const target = getTarget(event.nativeEvent);
-    if (target?.closest('button,input,select,textarea')) {
-      return;
-    }
-
-    // Prevent text selection when double clicking label.
-    if (!event.defaultPrevented && event.detail > 1) {
-      event.preventDefault();
-    }
-    if (native) {
-      return;
-    }
-    focusControl(event);
-  }
-  return native ? {
-    id,
-    htmlFor: resolvedControlId ?? undefined,
-    onMouseDown: handleInteraction
-  } : {
-    id,
-    onClick: handleInteraction,
-    onPointerDown(event) {
-      event.preventDefault();
-    }
-  };
-}
-function focusElementWithVisible(element) {
-  element.focus({
-    // Available from Chrome 144+ (January 2026).
-    // Safari and Firefox already support it.
-    // @ts-expect-error not available in types yet
-    focusVisible: true
-  });
-}
-
 /**
  * An accessible label that is automatically associated with the combobox trigger.
  * Renders a `<div>` element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.19.0",
+  "version": "8.20.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -487,7 +487,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.105.0",
+    "@jobber/design": "0.106.0",
     "@jobber/hooks": "2.21.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5e02a8ecc5f282d152c92e18dde04a27d401ecf5"
+  "gitHead": "c5da7c5d3db964c4803ccf359bc4e59ed63f668d"
 }