@jobber/components 8.26.0 → 8.26.2

package/dist/docs/DataTable/DataTable.md

@@ -33,10 +33,6 @@ numerical data (and their headers) round to the same decimal point, and are
 right-aligned. This makes it much easier for the reader to quickly parse large
 distinctions in dollar amounts, inventory counts, and other key business data.
 
-If you have a small list of information with a 1:1 label-to-data relationship
-(for example, the issued and due dates on an invoice), consider using
-[DescriptionList](../DescriptionList/DescriptionList.md).
-
 **Note**: The atomic DataTable components are the path forward and should be
 considered prior to using the [DataList](../DataList/DataList.md) and
 [Table](../Table/Table.md) components.

package/dist/docs/InputNumberExperimental/InputNumberExperimental.md

@@ -3,26 +3,53 @@
 ## Summary
 
 `InputNumberExperimental` collects a single numeric value in a form. Reach for
-it when the value benefits from being nudged up or down — quantities, prices,
-durations, or counts.
+it when the value benefits from being nudged up or down, such as quantities,
+prices, durations, or counts.
 
-Most fields need only the prop-driven usage below. For the rare layout the props
-can't express, the same field can be composed from parts — see the **Implement**
+Most fields only need the props shown below. For rare layouts the props can't
+handle, you can build the same field from smaller pieces. See the **Implement**
 tab.
 
 ### When to use
 
-* The value is a number the user increments or decrements (quantity, price,
-  days, repetitions).
-* A stepper, min/max bounds, or number formatting would help the user.
+* The value is a number the user increments or decrements, like a quantity,
+  price, day count, or number of repetitions
+* A stepper, min/max bounds, or number formatting would help the user
 
 ### When not to use
 
-* The value is a sequence of digits that is never calculated with — phone
+* The value is a sequence of digits that is never calculated with, such as phone
   numbers, credit-card numbers, or postal codes. A stepper adds no value there;
   use [InputText](../InputText/InputText.md) instead.
 
-## Basic usage
+## Anatomy
+
+`InputNumberExperimental` typically includes:
+
+* Label (required): names the value the field collects
+* Value field (required): the number the user types or steps through
+* Stepper (optional): increment and decrement controls that change the value by
+  `step`
+* Prefix or suffix (optional): a unit or symbol shown alongside the value, like
+  $ or kg
+* Loading indicator (optional): replaces the stepper while background work runs
+
+## Behavior
+
+* The field is controlled through `value`, where a number sets the value and
+  `null` leaves it empty.
+* `onValueCommitted` fires when the user commits a value: on blur, on Enter, or
+  when they use the stepper or arrow keys. Use `onValueChange` for per-keystroke
+  updates.
+* The stepper buttons and the Up and Down arrow keys change the value by `step`
+  (default 1).
+* `min` and `max` bound the value, and the stepper stops at each limit.
+* `loading` hides the stepper and shows an indicator in its place. The field
+  stays editable, so use `readOnly` or `disabled` to lock it.
+
+## Options
+
+### Basic
 
 Pass `label`, a controlled `value`, and `onValueCommitted`. Bounds (`min` /
 `max`) and `step` are optional.
@@ -50,11 +77,9 @@ export function InputNumberExperimentalBasicExample(
 }
 ```
 
-## Options
-
 ### Prefixes and suffixes
 
-Use `prefix` / `suffix` to add a unit or symbol. A suffix can be a label, an
+Use `prefix` or `suffix` to add a unit or symbol. A suffix can be a label, an
 icon, or a clickable icon that runs an action (give it an `ariaLabel`).
 
 ```tsx
@@ -101,7 +126,7 @@ export function InputNumberExperimentalAffixesExample() {
 
 ### Sizes
 
-Three sizes are available. `default` fits almost every form; use `small` only in
+3 sizes are available. `default` fits almost every form; use `small` only in
 tight spaces and `large` only in especially spacious layouts.
 
 ```tsx
@@ -189,8 +214,8 @@ export function InputNumberExperimentalFormattingExample() {
 ### Loading
 
 `loading` shows a non-blocking indicator in the stepper's slot for background
-work (for example, saving). The field stays editable and the stepper is hidden
-while loading.
+work, like saving. The field stays editable and the stepper is hidden while
+loading.
 
 ```tsx
 import React, { useState } from "react";
@@ -222,25 +247,59 @@ Put the unit in the label or an affix, not both.
 | Label "Weight", suffix "kg"     | Label "Weight (kg)", suffix "kg"        |
 | Label "Duration", suffix "days" | Label "Duration in days", suffix "days" |
 
-### Keep labels short and sentence-cased
+### Keep labels short and sentence case
 
 | ✅ Do     | ❌ Don't                 |
 | -------- | ----------------------- |
 | Quantity | Enter the quantity here |
 | Discount | DISCOUNT %              |
 
+### Put the symbol where it's read
+
+Use a prefix for a leading symbol and a suffix for a trailing unit, matching how
+the value is spoken.
+
+| ✅ Do                 | ❌ Don't              |
+| -------------------- | -------------------- |
+| Prefix "$", value 40 | Suffix "$", value 40 |
+| Suffix "%", value 15 | Prefix "%", value 15 |
+
+### Keep validation errors helpful
+
+When a value breaks `min` or `max`, provide helpful guidance on what values will
+be accepted as opposed to just providing a generic error.
+
+| ✅ Do                           | ❌ Don't       |
+| ------------------------------ | ------------- |
+| Enter a value between 1 and 99 | Invalid input |
+| Quantity can't be more than 50 | Error         |
+
+### Use numbers as opposed to spelling them
+
+Use numerals in labels, helper text, affixes, and bounds.
+
+| ✅ Do        | ❌ Don't         |
+| ----------- | --------------- |
+| Max 3 items | Max three items |
+
 ## Do's and Don'ts
 
+#### Do:
+
 * ✅ Use for values the user increments or decrements
-* ✅ Set `min` / `max` when the value has real bounds
+* ✅ Set `min` and `max` when the value has real bounds
 * ✅ Use `format` for currency, percent, and decimals rather than formatting the
   value yourself
-* ❌ Don't use it for digit sequences that are never calculated with (phone,
-  credit card)
-* ❌ Don't disable the field to communicate an error — show an `error` message
-  instead
+* ✅ Use `loading` for background work so the field stays usable
+
+#### Don't:
+
+* ❌ Use it for digit sequences that are never calculated with, like phone or
+  credit card numbers
+* ❌ Disable the field to communicate an error; show an `error` message instead
+* ❌ Repeat the unit in both the label and an affix
 
-## Accessibility
+## Accessibility notes
 
 The field is a native number input, so it is reachable and operable by keyboard
 and assistive technology.
@@ -252,13 +311,13 @@ and assistive technology.
 | Enter            | Commits the current value       |
 | Type             | Replaces the value              |
 
-Give a clickable affix a clear `ariaLabel` describing its action (for example,
-"Clear value").
+Give a clickable affix a clear `ariaLabel` describing its action, like "Clear
+value".
 
 ## Related components
 
-* For digit sequences that are not calculated with (phone, credit card), use
-  [InputText](../InputText/InputText.md).
+* For digit sequences that are not calculated with, like phone or credit card
+  numbers, use [InputText](../InputText/InputText.md).
 * For dates, use [InputDate](../InputDate/InputDate.md).
 
 

package/dist/docs/Table/Table.md

@@ -25,9 +25,7 @@ distinctions in dollar amounts, inventory counts, and other key business data.
 
 To list more complex collections of information (such as multi-line content like
 a detailed property address), you may want to consider the
-[List](../List/List.md) component. If you have a small list of information with
-a 1:1 label-to-data relationship (for example, the issued and due dates on an
-invoice), consider using [DescriptionList](../DescriptionList/DescriptionList.md).
+[List](../List/List.md) component.
 
 
 ## Configuration

package/dist/docs/index.md

@@ -27,7 +27,6 @@
 [DataTable](./DataTable/DataTable.md)
 [Datepicker](./Datepicker/Datepicker.md)
 [DatePickerNotes](./DatePickerNotes/DatePickerNotes.md)
-[DescriptionList](./DescriptionList/DescriptionList.md)
 [Dialog](./Dialog/Dialog.md)
 [disabled-states](./disabled-states/disabled-states.md)
 [Disclosure](./Disclosure/Disclosure.md)

package/dist/index.cjs

@@ -32,7 +32,6 @@ require('@jobber/hooks');
 require('./DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 var DatePicker = require('./DatePicker-cjs.js');
-var DescriptionList = require('./DescriptionList-cjs.js');
 var dialogReturnFocus = require('./dialogReturnFocus-cjs.js');
 var Disclosure = require('./Disclosure-cjs.js');
 var Divider = require('./Divider-cjs.js');
@@ -248,7 +247,6 @@ Object.defineProperty(exports, "createColumnHelper", {
     get: function () { return reactTable.createColumnHelper; }
 });
 exports.DatePicker = DatePicker.DatePicker;
-exports.DescriptionList = DescriptionList.DescriptionList;
 exports.Dialog = dialogReturnFocus.Dialog;
 exports.getDialogReturnFocus = dialogReturnFocus.getDialogReturnFocus;
 exports.getFirstFocusableWithin = dialogReturnFocus.getFirstFocusableWithin;

package/dist/index.d.mts

@@ -23,7 +23,6 @@ export * from "./DataDump";
 export * from "./DataList";
 export { DataTable, createColumnHelper } from "./DataTable";
 export * from "./DatePicker";
-export * from "./DescriptionList";
 export * from "./Dialog";
 export * from "./Disclosure";
 export * from "./Divider";

package/dist/index.d.ts

@@ -23,7 +23,6 @@ export * from "./DataDump";
 export * from "./DataList";
 export { DataTable, createColumnHelper } from "./DataTable";
 export * from "./DatePicker";
-export * from "./DescriptionList";
 export * from "./Dialog";
 export * from "./Disclosure";
 export * from "./Divider";

package/dist/index.mjs

@@ -30,7 +30,6 @@ import '@jobber/hooks';
 import './DataTableTable-es.js';
 export { createColumnHelper } from '@tanstack/react-table';
 export { D as DatePicker } from './DatePicker-es.js';
-export { D as DescriptionList } from './DescriptionList-es.js';
 export { D as Dialog, g as getDialogReturnFocus, a as getFirstFocusableWithin } from './dialogReturnFocus-es.js';
 export { D as Disclosure } from './Disclosure-es.js';
 export { D as Divider } from './Divider-es.js';

package/dist/styles.css

@@ -4176,6 +4176,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   line-height: 0;
 }
 
+.yL7--3ni8BM- p {
+  margin-top: 1px;
+  margin-top: var(--space-minuscule);
+}
+
 .qWsLxPjCBI8- {
   display: inline-block;
   margin-bottom: 4px;
@@ -10365,47 +10370,6 @@ h2.react-datepicker__current-month {
   color: var(--color-heading);
 }
 
-.BkruJ2-bRWg- {
-  margin: 0;
-}
-
-.tpCvfS7kyDQ- {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  padding: 8px 0;
-  padding: var(--space-small) 0;
-  border-bottom: 1px solid hsl(200, 13%, 87%);
-  border-bottom: var(--border-base) solid var(--color-border);
-}
-
-.tpCvfS7kyDQ-:first-child {
-  padding-top: 0;
-}
-
-.tpCvfS7kyDQ-:last-child {
-  padding-bottom: 0;
-  border-bottom: none;
-}
-
-.tpCvfS7kyDQ- dd {
-  min-width: calc(16px * 7.5);
-  min-width: calc(var(--base-unit) * 7.5);
-  box-sizing: border-box;
-  padding-right: 8px;
-  padding-right: var(--space-small);
-  -webkit-margin-start: 0;
-          margin-left: 0;
-  -ms-flex: 1 1 60%;
-      flex: 1 1 60%;
-}
-
-.tpCvfS7kyDQ- dt {
-  -ms-flex: 1 1 40%;
-      flex: 1 1 40%;
-}
-
 /* Dialog Sizes */
 .uYYyCR3l6E8- {
   --dialog-popup-max-width: 440px;

package/dist/utils/meta/meta.json

@@ -69,7 +69,6 @@
     "DataTable.SortableHeader",
     "DataTable.Table",
     "DatePicker",
-    "DescriptionList",
     "Dialog",
     "Dialog.Actions",
     "Dialog.Body",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.26.0",
+  "version": "8.26.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -150,11 +150,6 @@
       "import": "./dist/DatePicker/index.mjs",
       "require": "./dist/DatePicker/index.cjs"
     },
-    "./DescriptionList": {
-      "types": "./dist/DescriptionList/index.d.ts",
-      "import": "./dist/DescriptionList/index.mjs",
-      "require": "./dist/DescriptionList/index.cjs"
-    },
     "./Dialog": {
       "types": "./dist/Dialog/index.d.ts",
       "import": "./dist/Dialog/index.mjs",
@@ -545,5 +540,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4542a9c611cd00d7d25a48138bfed4365b3b0097"
+  "gitHead": "7d6fff8d16519d467ff260b676141d4e15d865ee"
 }

package/DescriptionList.d.ts

@@ -1 +0,0 @@
-export * from "./dist/DescriptionList";

package/DescriptionList.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true,
-});
-
-var DescriptionList = require("./dist/DescriptionList");
-
-Object.keys(DescriptionList).forEach(function(key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return DescriptionList[key];
-    },
-  });
-});

package/dist/DescriptionList/DescriptionList.d.ts

@@ -1,11 +0,0 @@
-import type { ReactNode } from "react";
-import React from "react";
-interface DescriptionListProps {
-    /**
-     * A tuple where the first item is the string to display as the term
-     * and the second value is the string to display as the definition
-     */
-    readonly data: [string, string | ReactNode][];
-}
-export declare function DescriptionList({ data }: DescriptionListProps): React.JSX.Element;
-export {};

package/dist/DescriptionList/index.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-var DescriptionList = require('../DescriptionList-cjs.js');
-require('react');
-require('../Typography-cjs.js');
-require('classnames');
-
-
-
-exports.DescriptionList = DescriptionList.DescriptionList;

package/dist/DescriptionList/index.d.ts

@@ -1 +0,0 @@
-export { DescriptionList } from "./DescriptionList";

package/dist/DescriptionList/index.mjs

@@ -1,4 +0,0 @@
-export { D as DescriptionList } from '../DescriptionList-es.js';
-import 'react';
-import '../Typography-es.js';
-import 'classnames';

package/dist/DescriptionList-cjs.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var React = require('react');
-var Typography = require('./Typography-cjs.js');
-
-var styles = {"descriptionList":"BkruJ2-bRWg-","termGroup":"tpCvfS7kyDQ-","spinning":"pkFPHChT5OI-"};
-
-function DescriptionList({ data }) {
-    return (React.createElement("dl", { className: styles.descriptionList }, data.map(([term, description], i) => (React.createElement("div", { key: `${term}-${i}`, className: styles.termGroup },
-        React.createElement(Typography.Typography, { element: "dt", textColor: "heading", size: "base" }, term),
-        React.createElement(Typography.Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
-}
-
-exports.DescriptionList = DescriptionList;

package/dist/DescriptionList-es.js

@@ -1,12 +0,0 @@
-import React__default from 'react';
-import { T as Typography } from './Typography-es.js';
-
-var styles = {"descriptionList":"BkruJ2-bRWg-","termGroup":"tpCvfS7kyDQ-","spinning":"pkFPHChT5OI-"};
-
-function DescriptionList({ data }) {
-    return (React__default.createElement("dl", { className: styles.descriptionList }, data.map(([term, description], i) => (React__default.createElement("div", { key: `${term}-${i}`, className: styles.termGroup },
-        React__default.createElement(Typography, { element: "dt", textColor: "heading", size: "base" }, term),
-        React__default.createElement(Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
-}
-
-export { DescriptionList as D };

package/dist/docs/DescriptionList/DescriptionList.md

@@ -1,25 +0,0 @@
-# Description List
-
-Description Lists are used to display a list of terms and descriptions.
-
-## Design & usage guidelines
-
-The Description List is a great solution when you have a small list of
-information with a 1:1 label-to-data relationship. For example, the issued and
-due dates on an invoice, or the job type, billing type and duration of a job.
-
-## Related components
-
-* To list more complex collections of related information, consider using a
-  [List](../List/List.md).
-* To display structured data for comparison, consider using a
-  [Table](../Table/Table.md).
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `data` | `[string, ReactNode][]` | Yes | — | A tuple where the first item is the string to display as the term and the second value is the string to display as th... |