@jobber/components 8.26.3 → 8.27.0

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

@@ -1,4 +1,5 @@
 import type React from "react";
+import type { ReactNode } from "react";
 import type { Select } from "../../unstyledPrimitives";
 import type { OverlaySeparator } from "../OverlaySeparator";
 export type SelectPrimitiveRootProps = React.ComponentPropsWithoutRef<typeof Select.Root>;
@@ -14,3 +15,17 @@ export type SelectPrimitiveItemIndicatorProps = React.ComponentPropsWithoutRef<t
 export type SelectPrimitiveGroupProps = React.ComponentPropsWithoutRef<typeof Select.Group>;
 export type SelectPrimitiveGroupLabelProps = React.ComponentPropsWithoutRef<typeof Select.GroupLabel>;
 export type SelectPrimitiveSeparatorProps = React.ComponentPropsWithoutRef<typeof OverlaySeparator>;
+/**
+ * Context-free, presentational trigger surface (field button + chevron). Render
+ * it via Base UI's `Select.Trigger` (or any trigger's `render` prop) so the
+ * field chrome can be reused outside a `Select.Root` — e.g. a bottom sheet.
+ */
+export interface SelectPrimitiveFieldTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** The value/placeholder display element rendered before the chevron. */
+    readonly valueSlot?: ReactNode;
+}
+/**
+ * Presentational value text (the `.value` styling) for triggers rendered
+ * outside a `Select.Root`, where `SelectPrimitive.Value` can't be used.
+ */
+export type SelectPrimitiveValueTextProps = React.ComponentPropsWithRef<"span">;

package/dist/primitives/index.cjs

@@ -32,8 +32,10 @@ require('../useLabelableId-cjs.js');
 require('../useCompositeListItem-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 require('../resolveAriaLabelledBy-cjs.js');
+require('../stringifyLocale-cjs.js');
 require('../useLabel-cjs.js');
 require('../ActivityIndicator-cjs.js');
+require('../FieldDescription-cjs.js');
 require('../NumberFieldInput-cjs.js');
 require('../SelectGroupLabel-cjs.js');
 require('../isElementDisabled-cjs.js');

package/dist/primitives/index.mjs

@@ -30,8 +30,10 @@ import '../useLabelableId-es.js';
 import '../useCompositeListItem-es.js';
 import '../floating-ui.react-dom-es.js';
 import '../resolveAriaLabelledBy-es.js';
+import '../stringifyLocale-es.js';
 import '../useLabel-es.js';
 import '../ActivityIndicator-es.js';
+import '../FieldDescription-es.js';
 import '../NumberFieldInput-es.js';
 import '../SelectGroupLabel-es.js';
 import '../isElementDisabled-es.js';

package/dist/stringifyLocale-cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}
+
+exports.stringifyLocale = stringifyLocale;

package/dist/stringifyLocale-es.js

@@ -0,0 +1,11 @@
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}
+
+export { stringifyLocale as s };

package/dist/styles.css

@@ -13487,6 +13487,240 @@ input.oOrjwubmsVA- {
   left: calc(100% / var(--segmentedControl--option-count) * 4);
 }
 
+.cWI-uFeNWWw- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  gap: 4px;
+  gap: var(--space-smaller);
+  width: 100%;
+}
+
+.ddkBixixBz4- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: auto;
+  vertical-align: middle;
+}
+
+._-1-lIAkgLuo- {
+  position: relative;
+  width: 100%;
+}
+
+.cWI-uFeNWWw-.ddkBixixBz4- ._-1-lIAkgLuo- {
+  width: auto;
+}
+
+.cWI-uFeNWWw- ._7rwBeCqTgRY- {
+  --field--height: calc(var(--space-largest) + 2 * var(--border-base));
+
+  transition: border-color 200ms ease-out;
+
+  transition: border-color var(--timing-base) ease-out;
+}
+
+.cWI-uFeNWWw-.ddkBixixBz4- ._7rwBeCqTgRY- {
+  width: auto;
+}
+
+/* ------ Size variants ------ */
+
+.cWI-uFeNWWw-._5QeBX5VxX6o- ._7rwBeCqTgRY- {
+  --field--height: calc(var(--space-larger) + var(--space-smaller));
+  --field--padding-x: var(--space-slim);
+}
+
+.cWI-uFeNWWw-.Pp5nj1nxejw- ._7rwBeCqTgRY- {
+  --field--height: var(--space-extravagant);
+  --field--padding-x: var(--space-large);
+}
+
+/* ------ Floating label ------ */
+
+.M1IjAW17-OE- {
+  position: absolute;
+  top: calc(2px + 1px);
+  top: calc(var(--space-smallest) + var(--border-base));
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(16px + 1px);
+  padding: 0 calc(var(--space-base) + var(--border-base));
+  overflow: hidden;
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+  line-height: calc(16px * 1.25);
+  line-height: calc(var(--base-unit) * 1.25);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+
+  transition: top 100ms ease-out,
+    font-size 100ms ease-out,
+    -webkit-transform 100ms ease-out;
+
+  transition: top var(--timing-quick) ease-out,
+    font-size var(--timing-quick) ease-out,
+    -webkit-transform var(--timing-quick) ease-out;
+
+  transition: top 100ms ease-out,
+    font-size 100ms ease-out,
+    transform 100ms ease-out;
+
+  transition: top var(--timing-quick) ease-out,
+    font-size var(--timing-quick) ease-out,
+    transform var(--timing-quick) ease-out;
+
+  transition: top 100ms ease-out,
+    font-size 100ms ease-out,
+    transform 100ms ease-out,
+    -webkit-transform 100ms ease-out;
+
+  transition: top var(--timing-quick) ease-out,
+    font-size var(--timing-quick) ease-out,
+    transform var(--timing-quick) ease-out,
+    -webkit-transform var(--timing-quick) ease-out;
+}
+
+.cWI-uFeNWWw-.Pp5nj1nxejw- .M1IjAW17-OE- {
+  padding: 0 calc(24px + 1px);
+  padding: 0 calc(var(--space-large) + var(--border-base));
+}
+
+._-1-lIAkgLuo-:has(._7rwBeCqTgRY-[data-placeholder]) .M1IjAW17-OE- {
+  top: 50%;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.M1IjAW17-OE-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.cWI-uFeNWWw-._1rx-nSAJT0U-:not(._5QeBX5VxX6o-) ._7rwBeCqTgRY- {
+  padding-top: calc(16px + 4px);
+  padding-top: calc(var(--space-base) + var(--space-smaller));
+  padding-bottom: 8px;
+  padding-bottom: var(--space-small);
+}
+
+.cWI-uFeNWWw-._1rx-nSAJT0U-.Pp5nj1nxejw- ._7rwBeCqTgRY- {
+  padding-top: calc(24px + 4px);
+  padding-top: calc(var(--space-large) + var(--space-smaller));
+}
+
+.cWI-uFeNWWw-._5QeBX5VxX6o-._1rx-nSAJT0U- .M1IjAW17-OE- {
+  display: none;
+}
+
+/* ------ Mobile bottom sheet ------ */
+
+.AVkCcDISAio- {
+  --sheet-item-gap: var(--space-small);
+  --sheet-item-min-height: calc(var(--base-unit) * 3);
+  --sheet-item-padding-y: var(--space-small);
+  --sheet-item-padding-x: var(--space-small);
+
+  display: -ms-flexbox;
+
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  padding: 16px;
+  padding: var(--space-base);
+  outline: none;
+}
+
+._35H33txs5QU- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: var(--sheet-item-gap);
+  min-height: var(--sheet-item-min-height);
+  box-sizing: border-box;
+  padding: var(--sheet-item-padding-y) var(--sheet-item-padding-x);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  outline: none;
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  cursor: pointer;
+}
+
+._35H33txs5QU-:focus-visible,
+._35H33txs5QU-:hover {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+.uL9j4OZn-3c- {
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._7NHtDHZnkG8- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -ms-flex-align: center;
+      align-items: center;
+}
+
+.UQ1tsDd1NFs- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+.UQ1tsDd1NFs-:not(:last-child) {
+  padding-bottom: 8px;
+  padding-bottom: var(--space-small);
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+.UQ1tsDd1NFs-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+._0kBfkWoRI5c- {
+  padding: var(--sheet-item-padding-y) var(--sheet-item-padding-x)
+    4px;
+  padding: var(--sheet-item-padding-y) var(--sheet-item-padding-x)
+    var(--space-smaller);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+}
+
+.RPsN9vqlzRw- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  border: none;
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
 .cCwRgRAz4qk- {
   --sideDrawer--base-padding: var(--space-base);
   --sideDrawer--background: var(--color-surface);

package/dist/unstyledPrimitives/index.cjs

@@ -22,6 +22,7 @@ var NumberFieldInput = require('../NumberFieldInput-cjs.js');
 var useLabelableId = require('../useLabelableId-cjs.js');
 var useLabel = require('../useLabel-cjs.js');
 var scrollEdges = require('../scrollEdges-cjs.js');
+require('../stringifyLocale-cjs.js');
 require('../isElementDisabled-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 

package/dist/unstyledPrimitives/index.mjs

@@ -8,7 +8,7 @@ import { a as DialogBackdrop, d as DialogDescription, f as DialogHandle, c as Di
 import { c as DialogClose, b as DialogTitle, a as DrawerClose, D as DrawerTitle } from '../DrawerTitle-es.js';
 import { i as DialogPortal, g as DialogRoot, h as DialogTrigger, m as useDrawerProviderContext, n as DrawerBackdropCssVars, o as DrawerPopupCssVars, q as DrawerProviderContext, u as useDialogRootContext, r as useDrawerRootContext, s as DrawerPopupDataAttributes, t as useDrawerSnapPoints, v as getSnapPointSwipeMovement, w as DrawerViewportContext, x as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, y as useScrollAreaRootContext, z as getOffset, A as ScrollAreaRootCssVars, B as scrollAreaStateAttributesMapping, C as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
 import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
-import { a as isHTMLElement, d as isLastTraversableNode, e as getParentNode, f as getComputedStyle, o as getWindow, b as isElement } from '../floating-ui.utils.dom-es.js';
+import { i as isHTMLElement, d as isLastTraversableNode, e as getParentNode, f as getComputedStyle, o as getWindow, b as isElement } from '../floating-ui.utils.dom-es.js';
 import { c as clamp } from '../clamp-es.js';
 import { C as CommonPopupDataAttributes, aj as useTriggerRegistration, am as BASE_UI_SWIPE_IGNORE_SELECTOR, a0 as isInteractiveElement, p as popupStateMapping, r as useDirection, G as inertValue, X as mergeCleanups, al as gecko, J as webkit, w as useStore, W as triggerOpenStateMapping } from '../useScrollLock-es.js';
 import * as ReactDOM from 'react-dom';
@@ -20,6 +20,7 @@ import { u as useNumberFieldRootContext, s as stateAttributesMapping$6, d as Num
 import { b as useFieldRootContext, f as fieldValidityMapping } from '../useLabelableId-es.js';
 import { u as useLabel } from '../useLabel-es.js';
 import { g as getMaxScrollOffset, n as normalizeScrollOffset, S as SCROLL_EDGE_TOLERANCE_PX } from '../scrollEdges-es.js';
+import '../stringifyLocale-es.js';
 import '../isElementDisabled-es.js';
 import '../floating-ui.react-dom-es.js';
 

package/dist/useButton-es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { a as useRefWithInit, E as EMPTY_OBJECT, f as formatErrorMessage, m as mergeProps, d as makeEventPreventable } from './useRenderElement-es.js';
-import { i as isShadowRoot, a as isHTMLElement } from './floating-ui.utils.dom-es.js';
+import { a as isShadowRoot, i as isHTMLElement } from './floating-ui.utils.dom-es.js';
 import * as ReactDOM from 'react-dom';
 
 let set;

package/dist/useCompositeListItem-es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { l as useId, a as useIsoLayoutEffect, m as useValueAsRef, b as useStableCallback, n as useAnimationFrame, p as activeElement, o as ownerDocument, q as contains, s as stopEvent, d as createChangeEventDetails, r as listNavigation, g as getTarget, v as focusOut, w as isVirtualClick, x as isVirtualPointerEvent, h as useTimeout, y as jsdom } from './useButton-es.js';
-import { b as isElement, a as isHTMLElement, o as getWindow } from './floating-ui.utils.dom-es.js';
+import { b as isElement, i as isHTMLElement, o as getWindow } from './floating-ui.utils.dom-es.js';
 import { u as useFloatingParentNodeId, b as FloatingRootStore, P as PopupTriggerMap, d as useFloatingTree, g as getFloatingFocusElement, i as isTypeableCombobox, e as isIndexOutOfListBounds, f as getMinListIndex, h as getMaxListIndex, j as findNonDisabledListIndex, k as enqueueFocus, A as ARROW_UP, l as ARROW_DOWN, m as ARROW_LEFT, n as ARROW_RIGHT, o as isListIndexDisabled, q as isElementVisible, r as useDirection, D as DISABLED_TRANSITIONS_STYLE, p as popupStateMapping, s as useScrollLock } from './useScrollLock-es.js';
 import { a as useRefWithInit, b as EMPTY_ARRAY, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
 import { jsx } from 'react/jsx-runtime';

package/dist/useLabel-cjs.js

@@ -4,16 +4,6 @@ var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var useButton = require('./useButton-cjs.js');
 var useLabelableId = require('./useLabelableId-cjs.js');
 
-function stringifyLocale(locale) {
-  if (Array.isArray(locale)) {
-    return locale.map(value => stringifyLocale(value)).join(',');
-  }
-  if (locale == null) {
-    return '';
-  }
-  return String(locale);
-}
-
 function useRegisteredLabelId(idProp, setLabelId) {
   const id = useButton.useBaseUiId(idProp);
   useButton.useIsoLayoutEffect(() => {
@@ -91,5 +81,4 @@ function focusElementWithVisible(element) {
   });
 }
 
-exports.stringifyLocale = stringifyLocale;
 exports.useLabel = useLabel;

package/dist/useLabel-es.js

@@ -1,17 +1,7 @@
-import { a as isHTMLElement } from './floating-ui.utils.dom-es.js';
+import { i as isHTMLElement } from './floating-ui.utils.dom-es.js';
 import { u as useBaseUiId, a as useIsoLayoutEffect, b as useStableCallback, g as getTarget, o as ownerDocument } from './useButton-es.js';
 import { u as useLabelableContext } from './useLabelableId-es.js';
 
-function stringifyLocale(locale) {
-  if (Array.isArray(locale)) {
-    return locale.map(value => stringifyLocale(value)).join(',');
-  }
-  if (locale == null) {
-    return '';
-  }
-  return String(locale);
-}
-
 function useRegisteredLabelId(idProp, setLabelId) {
   const id = useBaseUiId(idProp);
   useIsoLayoutEffect(() => {
@@ -89,4 +79,4 @@ function focusElementWithVisible(element) {
   });
 }
 
-export { stringifyLocale as s, useLabel as u };
+export { useLabel as u };

package/dist/useScrollLock-es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import { a as isHTMLElement, b as isElement, f as getComputedStyle, g as getNodeName, i as isShadowRoot, c as isNode, o as getWindow, d as isLastTraversableNode, e as getParentNode, m as isOverflowElement } from './floating-ui.utils.dom-es.js';
+import { i as isHTMLElement, b as isElement, f as getComputedStyle, g as getNodeName, a as isShadowRoot, c as isNode, o as getWindow, d as isLastTraversableNode, e as getParentNode, m as isOverflowElement } from './floating-ui.utils.dom-es.js';
 import { a as useIsoLayoutEffect, b as useStableCallback, a8 as lowerUserAgent, a9 as apple, q as contains, y as jsdom, E as visuallyHidden, s as stopEvent, o as ownerDocument, p as activeElement, B as addEventListener, d as createChangeEventDetails, v as focusOut, l as useId, m as useValueAsRef, h as useTimeout, n as useAnimationFrame, aa as resolveRef, a1 as triggerHover, Q as outsidePress, w as isVirtualClick, x as isVirtualPointerEvent, g as getTarget, Y as isMouseLikePointerType, $ as triggerPress, ab as isReactEvent, a0 as escapeKey, T as Timeout, ac as isClickLikeEvent, C as none, k as useTransitionStatus, f as useOpenChangeComplete, A as ios, O as useValueChanged, ad as TransitionStatusDataAttributes, ae as AnimationFrame } from './useButton-es.js';
 import { f as formatErrorMessage, a as useRefWithInit, i as isReactVersionAtLeast, N as NOOP, u as useRenderElement, E as EMPTY_OBJECT, c as useMergedRefs } from './useRenderElement-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/utils/meta/meta.json

@@ -213,6 +213,11 @@
     "SegmentedControlContext.Consumer",
     "SegmentedControlContext.Provider",
     "SegmentedControlProvider",
+    "Select",
+    "Select.Group",
+    "Select.GroupLabel",
+    "Select.Item",
+    "Select.Separator",
     "SideDrawer",
     "SideDrawer.Actions",
     "SideDrawer.BackButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.26.3",
+  "version": "8.27.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -355,6 +355,11 @@
       "import": "./dist/SegmentedControl/index.mjs",
       "require": "./dist/SegmentedControl/index.cjs"
     },
+    "./Select": {
+      "types": "./dist/Select/index.d.ts",
+      "import": "./dist/Select/index.mjs",
+      "require": "./dist/Select/index.cjs"
+    },
     "./SideKick": {
       "types": "./dist/SideKick/index.d.ts",
       "import": "./dist/SideKick/index.mjs",
@@ -540,5 +545,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "37b9c3bc407715b1dc2190912665cfc41e8cc335"
+  "gitHead": "6199d3b8603d38be96d8446ee6569814eb59a8e7"
 }