@jobber/components 7.7.0 → 7.8.0

package/dist/HelperText-cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var React = require('react');
+var Text = require('./Text-cjs.js');
+var Icon = require('./Icon-cjs.js');
+
+var styles = {"helperText":"yL7--3ni8BM-","neutral":"T8y6sv17efg-","critical":"VOiBogstpjU-","leadingIcon":"bvlhcaSPuO8-","spinning":"tsQaIzvraoE-"};
+
+const HelperText = React.forwardRef(function HelperText(_a, ref) {
+    var { message, status = "neutral", id } = _a, rest = tslib_es6.__rest(_a, ["message", "status", "id"]);
+    const generatedId = React.useId();
+    const isCritical = status === "critical";
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, id: id !== null && id !== void 0 ? id : generatedId, className: `${styles.helperText} ${isCritical ? styles.critical : styles.neutral}`, role: isCritical ? "alert" : undefined }),
+        isCritical && (React.createElement("span", { className: styles.leadingIcon },
+            React.createElement(Icon.Icon, { name: "alert", size: "small", color: "critical" }))),
+        React.createElement(Text.Text, { size: "small", variation: isCritical ? "error" : "subdued" }, message)));
+});
+
+exports.HelperText = HelperText;

package/dist/HelperText-es.js

@@ -0,0 +1,18 @@
+import { _ as __rest } from './tslib.es6-es.js';
+import React__default, { useId } from 'react';
+import { T as Text } from './Text-es.js';
+import { I as Icon } from './Icon-es.js';
+
+var styles = {"helperText":"yL7--3ni8BM-","neutral":"T8y6sv17efg-","critical":"VOiBogstpjU-","leadingIcon":"bvlhcaSPuO8-","spinning":"tsQaIzvraoE-"};
+
+const HelperText = React__default.forwardRef(function HelperText(_a, ref) {
+    var { message, status = "neutral", id } = _a, rest = __rest(_a, ["message", "status", "id"]);
+    const generatedId = useId();
+    const isCritical = status === "critical";
+    return (React__default.createElement("div", Object.assign({}, rest, { ref: ref, id: id !== null && id !== void 0 ? id : generatedId, className: `${styles.helperText} ${isCritical ? styles.critical : styles.neutral}`, role: isCritical ? "alert" : undefined }),
+        isCritical && (React__default.createElement("span", { className: styles.leadingIcon },
+            React__default.createElement(Icon, { name: "alert", size: "small", color: "critical" }))),
+        React__default.createElement(Text, { size: "small", variation: isCritical ? "error" : "subdued" }, message)));
+});
+
+export { HelperText as H };

package/dist/primitives/HelperText/HelperText.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface HelperTextProps {
+    /**
+     * The helper message.
+     */
+    readonly message: string;
+    /**
+     * `neutral` renders subdued text. `critical` renders an `alert` icon
+     * followed by error-coloured text.
+     *
+     * @default "neutral"
+     */
+    readonly status?: "neutral" | "critical";
+    /**
+     * Element id. Auto-generated when omitted. Parent form fields can pass this
+     * through (or let BaseUI `Field.Description` / `Field.Error` pass it via the
+     * `render` prop) to wire `aria-describedby` on their control.
+     */
+    readonly id?: string;
+}
+export declare const HelperText: React.ForwardRefExoticComponent<HelperTextProps & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/HelperText/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var HelperText = require('../../HelperText-cjs.js');
+require('../../tslib.es6-cjs.js');
+require('react');
+require('../../Text-cjs.js');
+require('../../Typography-cjs.js');
+require('classnames');
+require('../../Icon-cjs.js');
+require('@jobber/design');
+
+
+
+exports.HelperText = HelperText.HelperText;

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

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

package/dist/primitives/HelperText/index.mjs

@@ -0,0 +1,8 @@
+export { H as HelperText } from '../../HelperText-es.js';
+import '../../tslib.es6-es.js';
+import 'react';
+import '../../Text-es.js';
+import '../../Typography-es.js';
+import 'classnames';
+import '../../Icon-es.js';
+import '@jobber/design';

package/dist/primitives/index.cjs

@@ -2,6 +2,7 @@
 
 var OverlaySeparator = require('../OverlaySeparator-cjs.js');
 var BottomSheet = require('../BottomSheet-cjs.js');
+var HelperText = require('../HelperText-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
@@ -12,8 +13,13 @@ require('react/jsx-runtime');
 require('../index.esm-cjs.js');
 require('react-dom');
 require('../index-cjs.js');
+require('../Text-cjs.js');
+require('../Typography-cjs.js');
+require('../Icon-cjs.js');
+require('@jobber/design');
 
 
 
 exports.OverlaySeparator = OverlaySeparator.OverlaySeparator;
 exports.BottomSheet = BottomSheet.BottomSheet;
+exports.HelperText = HelperText.HelperText;

package/dist/primitives/index.d.ts

@@ -7,3 +7,4 @@
  */
 export * from "./OverlaySeparator/index";
 export * from "./BottomSheet/index";
+export * from "./HelperText/index";

package/dist/primitives/index.mjs

@@ -1,5 +1,6 @@
 export { O as OverlaySeparator } from '../OverlaySeparator-es.js';
 export { B as BottomSheet } from '../BottomSheet-es.js';
+export { H as HelperText } from '../HelperText-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
@@ -10,3 +11,7 @@ import 'react/jsx-runtime';
 import '../index.esm-es.js';
 import 'react-dom';
 import '../index-es.js';
+import '../Text-es.js';
+import '../Typography-es.js';
+import '../Icon-es.js';
+import '@jobber/design';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "0208a24535b499bdfbf9983264777e5a5d278d36"
+  "gitHead": "0286717f5c0aa2940052d0d6254f4f946be03583"
 }