@eifi1/ui-kit 0.35.0 → 0.37.0

package/dist/rhf/fields.js

@@ -29,7 +29,7 @@ import {
   Combobox,
   InlineEntityCombobox
 } from "../components/combobox.js";
-import { mergeRefs, useInlineHint } from "../components/field-parts.js";
+import { fieldHelpMark, mergeRefs, useInlineHint } from "../components/field-parts.js";
 import { useKitLocale } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
 import { decimalMark, readTyped } from "../lib/decimal-marks.js";
@@ -62,6 +62,7 @@ function RhfField({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -71,7 +72,9 @@ function RhfField({
   message = true,
   showLabel = true
 }) {
-  const shownHint = useInlineHint(hint);
+  const helpMark = fieldHelpMark(help, label);
+  const shownHint = useInlineHint(hint, helpMark !== void 0);
+  const labelEl = showLabel && hasContent(label) && /* @__PURE__ */ jsx(RhfLabel, { required, children: label });
   return /* @__PURE__ */ jsx(
     FormField,
     {
@@ -80,7 +83,10 @@ function RhfField({
       rules,
       disabled: excludeWhenDisabled ? disabled : void 0,
       render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(FormItem, { className, children: [
-        showLabel && hasContent(label) && /* @__PURE__ */ jsx(RhfLabel, { required, children: label }),
+        helpMark === void 0 ? labelEl : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          labelEl,
+          /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: helpMark })
+        ] }),
         /* @__PURE__ */ jsx(
           ControlSlot,
           {
@@ -102,6 +108,7 @@ function RhfTextField({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -111,7 +118,7 @@ function RhfTextField({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid }) => /* @__PURE__ */ jsx(
         Input,
         {
@@ -135,6 +142,7 @@ function RhfTextarea({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -145,7 +153,7 @@ function RhfTextarea({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid }) => /* @__PURE__ */ jsx(
         Textarea,
         {
@@ -179,6 +187,7 @@ function RhfNumberField({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -190,7 +199,7 @@ function RhfNumberField({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid, id }) => (
         // FormControl clones this element with `id` / `aria-describedby` /
         // `aria-invalid`, which NumberControl hands on to the field.
@@ -305,6 +314,7 @@ function RhfMoneyField({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -314,7 +324,7 @@ function RhfMoneyField({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       asControl: false,
       render: ({ field, invalid, id, describedBy }) => /* @__PURE__ */ jsx(
         MoneyControl,
@@ -367,6 +377,7 @@ function RhfDateField({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -378,7 +389,7 @@ function RhfDateField({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid, id }) => (
         // FormControl clones this element with `aria-describedby` / `aria-invalid`,
         // which DateControl hands on to the picker's trigger.
@@ -407,6 +418,7 @@ function RhfDateRangePicker({
   toRules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -438,6 +450,7 @@ function RhfDateRangePicker({
           toState: to.fieldState,
           label,
           hint,
+          help,
           required,
           disabled: Boolean(disabled),
           emptyValue,
@@ -455,6 +468,7 @@ function RangeBody({
   toState,
   label,
   hint,
+  help,
   required,
   disabled,
   emptyValue,
@@ -462,7 +476,8 @@ function RangeBody({
   pickerProps
 }) {
   const { id, formItemId, formMessageId, describedBy } = useFormField();
-  const shownHint = useInlineHint(hint);
+  const helpMark = fieldHelpMark(help, label);
+  const shownHint = useInlineHint(hint, helpMark !== void 0);
   const triggerRef = useMemo(() => mergeRefs(from.ref, to.ref), [from.ref, to.ref]);
   const invalid = fromState.invalid || toState.invalid;
   const messages = [fromState.error?.message, toState.error?.message].filter(
@@ -471,10 +486,14 @@ function RangeBody({
   const messageIds = messages.map((_, i) => `${formMessageId}-${i}`);
   const fromValue = from.value;
   const toValue = to.value;
+  const labelEl = hasContent(label) && // FormLabel colours from the START's error alone (its context is that field); the
+  // pair's state says it here.
+  /* @__PURE__ */ jsx(FormLabel, { id: `${id}-label`, required, "data-error": invalid || void 0, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasContent(label) && // FormLabel colours from the START's error alone (its context is that field);
-    // the pair's state says it here.
-    /* @__PURE__ */ jsx(FormLabel, { id: `${id}-label`, required, "data-error": invalid || void 0, children: label }),
+    helpMark === void 0 ? labelEl : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      labelEl,
+      /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: helpMark })
+    ] }),
     /* @__PURE__ */ jsx(
       DateRangePicker,
       {
@@ -522,6 +541,7 @@ function RhfTimeInput({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -532,7 +552,7 @@ function RhfTimeInput({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid }) => {
         const value = field.value;
         return /* @__PURE__ */ jsx(
@@ -559,6 +579,7 @@ function RhfIbanInput({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -568,7 +589,7 @@ function RhfIbanInput({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid }) => {
         const value = field.value;
         return /* @__PURE__ */ jsx(
@@ -595,6 +616,7 @@ function RhfPhoneInput({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -604,7 +626,7 @@ function RhfPhoneInput({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid }) => {
         const value = field.value;
         return /* @__PURE__ */ jsx(
@@ -631,6 +653,7 @@ function RhfCountrySelect({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -646,7 +669,7 @@ function RhfCountrySelect({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid, labelId }) => {
         const value = field.value;
         return (
@@ -713,6 +736,7 @@ function RhfMonthPicker({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -725,7 +749,7 @@ function RhfMonthPicker({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid, id }) => (
         // FormControl clones this element with `aria-describedby` / `aria-invalid`,
         // which MonthControl hands on to the picker's trigger.
@@ -753,6 +777,7 @@ function RhfSelect({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -767,7 +792,7 @@ function RhfSelect({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid }) => /* @__PURE__ */ jsxs(
         Select,
         {
@@ -836,6 +861,7 @@ function RhfToggleGroup({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -846,7 +872,7 @@ function RhfToggleGroup({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       asControl: false,
       render: ({ field, invalid, id, labelId, describedBy }) => /* @__PURE__ */ jsx(
         ToggleControl,
@@ -964,6 +990,7 @@ function RhfCombobox({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -975,7 +1002,7 @@ function RhfCombobox({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       asControl: false,
       message: false,
       render: ({ field, invalid, error, id, describedBy }) => /* @__PURE__ */ jsx(
@@ -1003,6 +1030,7 @@ function RhfInlineEntityCombobox({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1014,7 +1042,7 @@ function RhfInlineEntityCombobox({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       render: ({ field, invalid }) => {
         const value = field.value;
         return (
@@ -1047,6 +1075,7 @@ function RhfTextCombobox({
   rules,
   label,
   hint,
+  help,
   required,
   disabled,
   excludeWhenDisabled,
@@ -1057,7 +1086,7 @@ function RhfTextCombobox({
   return /* @__PURE__ */ jsx(
     RhfField,
     {
-      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      ...{ name, control, rules, label, hint, help, required, disabled, excludeWhenDisabled, className },
       asControl: false,
       message: false,
       render: ({ field, invalid, error, id, describedBy }) => /* @__PURE__ */ jsx(