@byline/ui 1.7.3 → 1.7.4

package/dist/fields/image/image-field.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { isPendingStoredFileValue } from "@byline/core";
 import classnames from "classnames";
 import { useFieldError, useFieldValue, useFormContext, useIsDirty } from "../../forms/form-context.js";
-import { ErrorText } from "../../uikit.js";
+import { ErrorText, HelpText, Label } from "../../uikit.js";
 import { ImageLightbox } from "../../widgets/image-lightbox/image-lightbox.js";
 import { useFieldChangeHandler } from "../use-field-change-handler.js";
 import image_field_module from "./image-field.module.js";
@@ -31,26 +31,18 @@ const ImageField = ({ field, collectionPath, value, defaultValue, onChange: _onC
     };
     const [lightboxOpen, setLightboxOpen] = useState(false);
     const canOpenLightbox = !isPending && !!incomingValue?.storageUrl;
+    const htmlId = fieldPath;
     return /*#__PURE__*/ jsxs("div", {
         className: `byline-field-image ${field.name}`,
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: classnames('byline-field-image-header', image_field_module.header),
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: classnames('byline-field-image-label', image_field_module.label),
-                                children: [
-                                    field.label ?? field.name,
-                                    field.optional ? '' : ' *'
-                                ]
-                            }),
-                            field.helpText && /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-image-help', image_field_module.help),
-                                children: field.helpText
-                            })
-                        ]
+                    /*#__PURE__*/ jsx(Label, {
+                        id: htmlId,
+                        htmlFor: htmlId,
+                        label: field.label ?? field.name,
+                        required: !field.optional
                     }),
                     !showUploadWidget && collectionPath && /*#__PURE__*/ jsx("button", {
                         type: "button",
@@ -207,6 +199,9 @@ const ImageField = ({ field, collectionPath, value, defaultValue, onChange: _onC
                     })
                 ]
             }),
+            field.helpText && /*#__PURE__*/ jsx(HelpText, {
+                text: field.helpText
+            }),
             fieldError && /*#__PURE__*/ jsx(ErrorText, {
                 id: `${field.name}-error`,
                 text: fieldError

package/dist/fields/image/image-field.module.js

@@ -1,8 +1,6 @@
 import "./image-field_module.css";
 const image_field_module = {
     header: "header-qe_E_5",
-    label: "label-NX4rr4",
-    help: "help-M8XvYp",
     remove: "remove-ib7eKx",
     empty: "empty-b8pdoJ",
     tile: "tile-izbLn0",

package/dist/fields/image/image-field_module.css

@@ -5,18 +5,6 @@
   display: flex;
 }
 
-:is(.label-NX4rr4, .byline-field-image-label) {
-  color: var(--gray-100);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-:is(.help-M8XvYp, .byline-field-image-help) {
-  color: var(--gray-400);
-  font-size: var(--font-size-xs);
-  margin-top: .125rem;
-}
-
 :is(.remove-ib7eKx, .byline-field-image-remove) {
   color: var(--red-500);
   font-size: var(--font-size-xs);

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -65,9 +65,9 @@
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.2",
     "zod-form-data": "^3.0.1",
-    "@byline/admin": "1.7.3",
-    "@byline/client": "1.7.3",
-    "@byline/core": "1.7.3"
+    "@byline/admin": "1.7.4",
+    "@byline/core": "1.7.4",
+    "@byline/client": "1.7.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/fields/image/image-field.module.css

@@ -4,8 +4,6 @@
  * Override handles:
  *   .byline-field-image                — wrapper div
  *   .byline-field-image-header         — label + remove button row
- *   .byline-field-image-label          — primary label text
- *   .byline-field-image-help           — secondary help text
  *   .byline-field-image-remove         — remove-button text-link
  *   .byline-field-image-empty          — empty-state hint text
  *   .byline-field-image-tile           — bordered preview/metadata tile
@@ -26,20 +24,6 @@
   margin-bottom: 0.25rem;
 }
 
-.label,
-:global(.byline-field-image-label) {
-  color: var(--gray-100);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.help,
-:global(.byline-field-image-help) {
-  margin-top: 0.125rem;
-  color: var(--gray-400);
-  font-size: var(--font-size-xs);
-}
-
 .remove,
 :global(.byline-field-image-remove) {
   background: none;

package/src/fields/image/image-field.tsx

@@ -16,7 +16,7 @@ import {
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue, useFormContext, useIsDirty } from '../../forms/form-context'
-import { ErrorText } from '../../uikit.js'
+import { ErrorText, HelpText, Label } from '../../uikit.js'
 import { ImageLightbox } from '../../widgets/image-lightbox/image-lightbox.js'
 import { useFieldChangeHandler } from '../use-field-change-handler'
 import styles from './image-field.module.css'
@@ -92,18 +92,17 @@ export const ImageField = ({
   const [lightboxOpen, setLightboxOpen] = useState(false)
   const canOpenLightbox = !isPending && !!incomingValue?.storageUrl
 
+  const htmlId = fieldPath
+
   return (
     <div className={`byline-field-image ${field.name}`}>
       <div className={cx('byline-field-image-header', styles.header)}>
-        <div>
-          <div className={cx('byline-field-image-label', styles.label)}>
-            {field.label ?? field.name}
-            {field.optional ? '' : ' *'}
-          </div>
-          {field.helpText && (
-            <div className={cx('byline-field-image-help', styles.help)}>{field.helpText}</div>
-          )}
-        </div>
+        <Label
+          id={htmlId}
+          htmlFor={htmlId}
+          label={field.label ?? field.name}
+          required={!field.optional}
+        />
         {/* Remove button — shown when an image is set (including pending) */}
         {!showUploadWidget && collectionPath && (
           <button
@@ -244,6 +243,8 @@ export const ImageField = ({
         </div>
       )}
 
+      {field.helpText && <HelpText text={field.helpText} />}
+
       {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
 
       {canOpenLightbox && incomingValue?.storageUrl && (