@jobber/components 8.20.2 → 8.21.0

package/dist/docs/empty-states/empty-states.md

@@ -21,6 +21,7 @@ for the “emptiness” may include, but are not limited to…
 * Search results with no match
 * An error has resulted in the user not being able to access content they
   otherwise could
+* A specific field doesn't have a value (for example, a custom field that the user hasn't populated)
 
 ## Solution
 
@@ -63,6 +64,34 @@ a single Banner can look out of place.
   </Box>
 ```
 
+### Field-level empty states
+
+When a field doesn't have a value, use a dash to indicate the lack of a value.
+This provides:
+
+* confirmation that nothing was entered
+* confirmation that something *can* be entered there should the information require an update
+
+```tsx
+<Card>
+    <Content>
+      <Heading level={4}>Additional details</Heading>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Preferred service date</Text>
+        <Text>June 25, 2026</Text>
+      </Stack>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Gate code</Text>
+        <Text>—</Text>
+      </Stack>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Additional requests</Text>
+        <Text>—</Text>
+      </Stack>
+    </Content>
+  </Card>
+```
+
 ### When the user can't add content
 
 When a card is empty, and there is no way for the user to add content, you

package/dist/index.cjs

@@ -175,12 +175,16 @@ require('./GridCell-cjs.js');
 require('./FormFieldPostFix-cjs.js');
 require('axios');
 require('./useRenderElement-cjs.js');
+require('./buttonRenderAdapter-cjs.js');
 require('./BottomSheet-cjs.js');
 require('./ScrollAreaViewport-cjs.js');
+require('./InternalBackdrop-cjs.js');
+require('./useButton-cjs.js');
 require('./clamp-cjs.js');
 require('./OverlaySeparator-cjs.js');
 require('./Separator-cjs.js');
 require('./MenuSubmenuTrigger-cjs.js');
+require('./useCompositeListItem-cjs.js');
 require('./AtlantisPortalContent-cjs.js');
 require('@jobber/formatters');
 require('react-dom/client');

package/dist/index.mjs

@@ -173,12 +173,16 @@ import './GridCell-es.js';
 import './FormFieldPostFix-es.js';
 import 'axios';
 import './useRenderElement-es.js';
+import './buttonRenderAdapter-es.js';
 import './BottomSheet-es.js';
 import './ScrollAreaViewport-es.js';
+import './InternalBackdrop-es.js';
+import './useButton-es.js';
 import './clamp-es.js';
 import './OverlaySeparator-es.js';
 import './Separator-es.js';
 import './MenuSubmenuTrigger-es.js';
+import './useCompositeListItem-es.js';
 import './AtlantisPortalContent-es.js';
 import '@jobber/formatters';
 import 'react-dom/client';

package/dist/primitives/BottomSheet/index.cjs

@@ -4,6 +4,7 @@ var BottomSheet = require('../../BottomSheet-cjs.js');
 require('../../tslib.es6-cjs.js');
 require('react');
 require('classnames');
+require('../../buttonRenderAdapter-cjs.js');
 require('../../Button-cjs.js');
 require('react-router-dom');
 require('../../Icon-cjs.js');
@@ -11,11 +12,13 @@ require('@jobber/design');
 require('../../Typography-cjs.js');
 require('../../useRenderElement-cjs.js');
 require('../../ScrollAreaViewport-cjs.js');
-require('../../clamp-cjs.js');
+require('../../InternalBackdrop-cjs.js');
+require('../../index.esm-cjs.js');
 require('../../floating-ui.utils.dom-cjs.js');
+require('../../useButton-cjs.js');
 require('react-dom');
 require('react/jsx-runtime');
-require('../../index.esm-cjs.js');
+require('../../clamp-cjs.js');
 
 
 

package/dist/primitives/BottomSheet/index.mjs

@@ -2,6 +2,7 @@ export { B as BottomSheet } from '../../BottomSheet-es.js';
 import '../../tslib.es6-es.js';
 import 'react';
 import 'classnames';
+import '../../buttonRenderAdapter-es.js';
 import '../../Button-es.js';
 import 'react-router-dom';
 import '../../Icon-es.js';
@@ -9,8 +10,10 @@ import '@jobber/design';
 import '../../Typography-es.js';
 import '../../useRenderElement-es.js';
 import '../../ScrollAreaViewport-es.js';
-import '../../clamp-es.js';
+import '../../InternalBackdrop-es.js';
+import '../../index.esm-es.js';
 import '../../floating-ui.utils.dom-es.js';
+import '../../useButton-es.js';
 import 'react-dom';
 import 'react/jsx-runtime';
-import '../../index.esm-es.js';
+import '../../clamp-es.js';

package/dist/primitives/ComboboxPrimitive/ComboboxPrimitive.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { ComboboxPrimitiveArrowProps, ComboboxPrimitiveBackdropProps, ComboboxPrimitiveChipProps, ComboboxPrimitiveChipRemoveProps, ComboboxPrimitiveChipsProps, ComboboxPrimitiveClearProps, ComboboxPrimitiveCollectionProps, ComboboxPrimitiveEmptyProps, ComboboxPrimitiveGroupLabelProps, ComboboxPrimitiveGroupProps, ComboboxPrimitiveIconProps, ComboboxPrimitiveInputGroupProps, ComboboxPrimitiveInputProps, ComboboxPrimitiveItemIndicatorProps, ComboboxPrimitiveItemProps, ComboboxPrimitiveLabelProps, ComboboxPrimitiveListProps, ComboboxPrimitivePopupProps, ComboboxPrimitivePortalProps, ComboboxPrimitivePositionerProps, ComboboxPrimitiveRootProps, ComboboxPrimitiveRowProps, ComboboxPrimitiveSeparatorProps, ComboboxPrimitiveStatusProps, ComboboxPrimitiveTriggerProps, ComboboxPrimitiveValueProps } from "./ComboboxPrimitive.types";
+import { Combobox as BaseCombobox } from "../../unstyledPrimitives";
+declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false>(props: ComboboxPrimitiveRootProps<Value, Multiple>): React.JSX.Element;
+declare function ComboboxLabel({ className, ...labelProps }: ComboboxPrimitiveLabelProps): React.JSX.Element;
+declare function ComboboxValue(props: ComboboxPrimitiveValueProps): React.JSX.Element;
+declare function ComboboxInput({ className, ...inputProps }: ComboboxPrimitiveInputProps): React.JSX.Element;
+declare function ComboboxInputGroup({ className, ...inputGroupProps }: ComboboxPrimitiveInputGroupProps): React.JSX.Element;
+declare function ComboboxTrigger({ className, render, ...triggerProps }: ComboboxPrimitiveTriggerProps): React.JSX.Element;
+declare function ComboboxList({ className, ...listProps }: ComboboxPrimitiveListProps): React.JSX.Element;
+declare function ComboboxStatus(props: ComboboxPrimitiveStatusProps): React.JSX.Element;
+declare function ComboboxPortal(props: ComboboxPrimitivePortalProps): React.JSX.Element;
+declare function ComboboxBackdrop({ className, ...backdropProps }: ComboboxPrimitiveBackdropProps): React.JSX.Element;
+declare function ComboboxPositioner({ className, sideOffset, ...positionerProps }: ComboboxPrimitivePositionerProps): React.JSX.Element;
+declare function ComboboxPopup({ className, ...popupProps }: ComboboxPrimitivePopupProps): React.JSX.Element;
+declare function ComboboxArrow({ className, ...arrowProps }: ComboboxPrimitiveArrowProps): React.JSX.Element;
+declare function ComboboxIcon({ className, ...iconProps }: ComboboxPrimitiveIconProps): React.JSX.Element;
+declare function ComboboxGroup({ className, ...groupProps }: ComboboxPrimitiveGroupProps): React.JSX.Element;
+declare function ComboboxGroupLabel({ className, ...groupLabelProps }: ComboboxPrimitiveGroupLabelProps): React.JSX.Element;
+declare function ComboboxItem({ className, ...itemProps }: ComboboxPrimitiveItemProps): React.JSX.Element;
+declare function ComboboxItemIndicator({ className, ...itemIndicatorProps }: ComboboxPrimitiveItemIndicatorProps): React.JSX.Element;
+declare function ComboboxChips({ className, ...chipsProps }: ComboboxPrimitiveChipsProps): React.JSX.Element;
+declare function ComboboxChip({ className, ...chipProps }: ComboboxPrimitiveChipProps): React.JSX.Element;
+declare function ComboboxChipRemove({ className, ...chipRemoveProps }: ComboboxPrimitiveChipRemoveProps): React.JSX.Element;
+declare function ComboboxRow({ className, ...rowProps }: ComboboxPrimitiveRowProps): React.JSX.Element;
+declare function ComboboxCollection(props: ComboboxPrimitiveCollectionProps): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...emptyProps }: ComboboxPrimitiveEmptyProps): React.JSX.Element;
+declare function ComboboxClear({ className, ...clearProps }: ComboboxPrimitiveClearProps): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...separatorProps }: ComboboxPrimitiveSeparatorProps): React.JSX.Element;
+declare const useFilter: typeof BaseCombobox.useFilter;
+declare const useFilteredItems: typeof BaseCombobox.useFilteredItems;
+export { ComboboxRoot as Root, ComboboxLabel as Label, ComboboxValue as Value, ComboboxInput as Input, ComboboxInputGroup as InputGroup, ComboboxTrigger as Trigger, ComboboxList as List, ComboboxStatus as Status, ComboboxPortal as Portal, ComboboxBackdrop as Backdrop, ComboboxPositioner as Positioner, ComboboxPopup as Popup, ComboboxArrow as Arrow, ComboboxIcon as Icon, ComboboxGroup as Group, ComboboxGroupLabel as GroupLabel, ComboboxItem as Item, ComboboxItemIndicator as ItemIndicator, ComboboxChips as Chips, ComboboxChip as Chip, ComboboxChipRemove as ChipRemove, ComboboxRow as Row, ComboboxCollection as Collection, ComboboxEmpty as Empty, ComboboxClear as Clear, ComboboxSeparator as Separator, useFilter, useFilteredItems, };

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

@@ -0,0 +1,30 @@
+import type { ComboboxArrowProps as BaseComboboxArrowProps, ComboboxBackdropProps as BaseComboboxBackdropProps, ComboboxChipProps as BaseComboboxChipProps, ComboboxChipRemoveProps as BaseComboboxChipRemoveProps, ComboboxChipsProps as BaseComboboxChipsProps, ComboboxClearProps as BaseComboboxClearProps, ComboboxCollectionProps as BaseComboboxCollectionProps, ComboboxEmptyProps as BaseComboboxEmptyProps, ComboboxFilter as BaseComboboxFilter, ComboboxFilterOptions as BaseComboboxFilterOptions, ComboboxGroupLabelProps as BaseComboboxGroupLabelProps, ComboboxGroupProps as BaseComboboxGroupProps, ComboboxIconProps as BaseComboboxIconProps, ComboboxInputGroupProps as BaseComboboxInputGroupProps, ComboboxInputProps as BaseComboboxInputProps, ComboboxItemIndicatorProps as BaseComboboxItemIndicatorProps, ComboboxItemProps as BaseComboboxItemProps, ComboboxLabelProps as BaseComboboxLabelProps, ComboboxListProps as BaseComboboxListProps, ComboboxPopupProps as BaseComboboxPopupProps, ComboboxPortalProps as BaseComboboxPortalProps, ComboboxPositionerProps as BaseComboboxPositionerProps, ComboboxRootProps as BaseComboboxRootProps, ComboboxRowProps as BaseComboboxRowProps, ComboboxStatusProps as BaseComboboxStatusProps, ComboboxTriggerProps as BaseComboboxTriggerProps, ComboboxValueProps as BaseComboboxValueProps } from "@base-ui/react/combobox";
+import type { SeparatorProps as BaseSeparatorProps } from "@base-ui/react/separator";
+export type ComboboxPrimitiveRootProps<Value, Multiple extends boolean | undefined = false> = BaseComboboxRootProps<Value, Multiple>;
+export type ComboboxPrimitiveLabelProps = BaseComboboxLabelProps;
+export type ComboboxPrimitiveValueProps = BaseComboboxValueProps;
+export type ComboboxPrimitiveInputProps = BaseComboboxInputProps;
+export type ComboboxPrimitiveInputGroupProps = BaseComboboxInputGroupProps;
+export type ComboboxPrimitiveTriggerProps = BaseComboboxTriggerProps;
+export type ComboboxPrimitiveListProps = BaseComboboxListProps;
+export type ComboboxPrimitiveStatusProps = BaseComboboxStatusProps;
+export type ComboboxPrimitivePortalProps = BaseComboboxPortalProps;
+export type ComboboxPrimitiveBackdropProps = BaseComboboxBackdropProps;
+export type ComboboxPrimitivePositionerProps = BaseComboboxPositionerProps;
+export type ComboboxPrimitivePopupProps = BaseComboboxPopupProps;
+export type ComboboxPrimitiveArrowProps = BaseComboboxArrowProps;
+export type ComboboxPrimitiveIconProps = BaseComboboxIconProps;
+export type ComboboxPrimitiveGroupProps = BaseComboboxGroupProps;
+export type ComboboxPrimitiveGroupLabelProps = BaseComboboxGroupLabelProps;
+export type ComboboxPrimitiveItemProps = BaseComboboxItemProps;
+export type ComboboxPrimitiveItemIndicatorProps = BaseComboboxItemIndicatorProps;
+export type ComboboxPrimitiveChipsProps = BaseComboboxChipsProps;
+export type ComboboxPrimitiveChipProps = BaseComboboxChipProps;
+export type ComboboxPrimitiveChipRemoveProps = BaseComboboxChipRemoveProps;
+export type ComboboxPrimitiveRowProps = BaseComboboxRowProps;
+export type ComboboxPrimitiveCollectionProps = BaseComboboxCollectionProps;
+export type ComboboxPrimitiveEmptyProps = BaseComboboxEmptyProps;
+export type ComboboxPrimitiveClearProps = BaseComboboxClearProps;
+export type ComboboxPrimitiveSeparatorProps = BaseSeparatorProps;
+export type ComboboxPrimitiveFilter = BaseComboboxFilter;
+export type ComboboxPrimitiveFilterOptions = BaseComboboxFilterOptions;

package/dist/primitives/ComboboxPrimitive/index.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var ComboboxPrimitive = require('../../ComboboxPrimitive-cjs.js');
+require('../../tslib.es6-cjs.js');
+require('react');
+require('classnames');
+require('../../buttonRenderAdapter-cjs.js');
+require('../../Button-cjs.js');
+require('react-router-dom');
+require('../../Icon-cjs.js');
+require('@jobber/design');
+require('../../Typography-cjs.js');
+require('../../useRenderElement-cjs.js');
+require('../../ComboboxChipRemove-cjs.js');
+require('../../useButton-cjs.js');
+require('../../floating-ui.utils.dom-cjs.js');
+require('react-dom');
+require('../../useLabel-cjs.js');
+require('../../useCompositeListItem-cjs.js');
+require('../../InternalBackdrop-cjs.js');
+require('../../index.esm-cjs.js');
+require('react/jsx-runtime');
+require('../../floating-ui.react-dom-cjs.js');
+require('../../Separator-cjs.js');
+
+
+
+exports.ComboboxPrimitive = ComboboxPrimitive.ComboboxPrimitive;

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

@@ -0,0 +1,2 @@
+export * as ComboboxPrimitive from "./ComboboxPrimitive";
+export type { ComboboxPrimitiveArrowProps, ComboboxPrimitiveBackdropProps, ComboboxPrimitiveChipProps, ComboboxPrimitiveChipRemoveProps, ComboboxPrimitiveChipsProps, ComboboxPrimitiveClearProps, ComboboxPrimitiveCollectionProps, ComboboxPrimitiveEmptyProps, ComboboxPrimitiveFilter, ComboboxPrimitiveFilterOptions, ComboboxPrimitiveGroupLabelProps, ComboboxPrimitiveGroupProps, ComboboxPrimitiveIconProps, ComboboxPrimitiveInputGroupProps, ComboboxPrimitiveInputProps, ComboboxPrimitiveItemIndicatorProps, ComboboxPrimitiveItemProps, ComboboxPrimitiveLabelProps, ComboboxPrimitiveListProps, ComboboxPrimitivePopupProps, ComboboxPrimitivePortalProps, ComboboxPrimitivePositionerProps, ComboboxPrimitiveRootProps, ComboboxPrimitiveRowProps, ComboboxPrimitiveSeparatorProps, ComboboxPrimitiveStatusProps, ComboboxPrimitiveTriggerProps, ComboboxPrimitiveValueProps, } from "./ComboboxPrimitive.types";

package/dist/primitives/ComboboxPrimitive/index.mjs

@@ -0,0 +1,22 @@
+export { C as ComboboxPrimitive } from '../../ComboboxPrimitive-es.js';
+import '../../tslib.es6-es.js';
+import 'react';
+import 'classnames';
+import '../../buttonRenderAdapter-es.js';
+import '../../Button-es.js';
+import 'react-router-dom';
+import '../../Icon-es.js';
+import '@jobber/design';
+import '../../Typography-es.js';
+import '../../useRenderElement-es.js';
+import '../../ComboboxChipRemove-es.js';
+import '../../useButton-es.js';
+import '../../floating-ui.utils.dom-es.js';
+import 'react-dom';
+import '../../useLabel-es.js';
+import '../../useCompositeListItem-es.js';
+import '../../InternalBackdrop-es.js';
+import '../../index.esm-es.js';
+import 'react/jsx-runtime';
+import '../../floating-ui.react-dom-es.js';
+import '../../Separator-es.js';

package/dist/primitives/InputNumberExperimental/index.cjs

@@ -11,11 +11,13 @@ require('../../Icon-cjs.js');
 require('@jobber/design');
 require('../../Typography-cjs.js');
 require('../../useRenderElement-cjs.js');
-require('../../clamp-cjs.js');
+require('../../useButton-cjs.js');
 require('../../floating-ui.utils.dom-cjs.js');
 require('react-dom');
-require('../../NumberFieldInput-cjs.js');
+require('../../useLabel-cjs.js');
 require('react/jsx-runtime');
+require('../../NumberFieldInput-cjs.js');
+require('../../clamp-cjs.js');
 
 
 

package/dist/primitives/InputNumberExperimental/index.mjs

@@ -9,8 +9,10 @@ import '../../Icon-es.js';
 import '@jobber/design';
 import '../../Typography-es.js';
 import '../../useRenderElement-es.js';
-import '../../clamp-es.js';
+import '../../useButton-es.js';
 import '../../floating-ui.utils.dom-es.js';
 import 'react-dom';
-import '../../NumberFieldInput-es.js';
+import '../../useLabel-es.js';
 import 'react/jsx-runtime';
+import '../../NumberFieldInput-es.js';
+import '../../clamp-es.js';

package/dist/primitives/index.cjs

@@ -3,24 +3,32 @@
 var OverlaySeparator = require('../OverlaySeparator-cjs.js');
 var BottomSheet = require('../BottomSheet-cjs.js');
 var HelperText = require('../HelperText-cjs.js');
+var ComboboxPrimitive = require('../ComboboxPrimitive-cjs.js');
 var InputNumberExperimental = require('../InputNumberExperimental-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('../Separator-cjs.js');
 require('../useRenderElement-cjs.js');
+require('../buttonRenderAdapter-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
-require('../clamp-cjs.js');
+require('../InternalBackdrop-cjs.js');
+require('../index.esm-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
+require('../useButton-cjs.js');
 require('react-dom');
 require('react/jsx-runtime');
-require('../index.esm-cjs.js');
+require('../clamp-cjs.js');
 require('../Text-cjs.js');
+require('../ComboboxChipRemove-cjs.js');
+require('../useLabel-cjs.js');
+require('../useCompositeListItem-cjs.js');
+require('../floating-ui.react-dom-cjs.js');
 require('../ActivityIndicator-cjs.js');
 require('../NumberFieldInput-cjs.js');
 
@@ -29,4 +37,5 @@ require('../NumberFieldInput-cjs.js');
 exports.OverlaySeparator = OverlaySeparator.OverlaySeparator;
 exports.BottomSheet = BottomSheet.BottomSheet;
 exports.HelperText = HelperText.HelperText;
+exports.ComboboxPrimitive = ComboboxPrimitive.ComboboxPrimitive;
 exports.InputNumberExperimental = InputNumberExperimental.InputNumberExperimental;

package/dist/primitives/index.d.ts

@@ -8,5 +8,6 @@
 export * from "./OverlaySeparator/index";
 export * from "./BottomSheet/index";
 export * from "./HelperText/index";
+export * from "./ComboboxPrimitive/index";
 export { InputNumberExperimental } from "./InputNumberExperimental";
 export type { InputNumberExperimentalAffix, InputNumberExperimentalProps, InputNumberExperimentalRef, } from "./InputNumberExperimental";

package/dist/primitives/index.mjs

@@ -1,23 +1,31 @@
 export { O as OverlaySeparator } from '../OverlaySeparator-es.js';
 export { B as BottomSheet } from '../BottomSheet-es.js';
 export { H as HelperText } from '../HelperText-es.js';
+export { C as ComboboxPrimitive } from '../ComboboxPrimitive-es.js';
 export { I as InputNumberExperimental } from '../InputNumberExperimental-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../Separator-es.js';
 import '../useRenderElement-es.js';
+import '../buttonRenderAdapter-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';
 import '../ScrollAreaViewport-es.js';
-import '../clamp-es.js';
+import '../InternalBackdrop-es.js';
+import '../index.esm-es.js';
 import '../floating-ui.utils.dom-es.js';
+import '../useButton-es.js';
 import 'react-dom';
 import 'react/jsx-runtime';
-import '../index.esm-es.js';
+import '../clamp-es.js';
 import '../Text-es.js';
+import '../ComboboxChipRemove-es.js';
+import '../useLabel-es.js';
+import '../useCompositeListItem-es.js';
+import '../floating-ui.react-dom-es.js';
 import '../ActivityIndicator-es.js';
 import '../NumberFieldInput-es.js';