Save workspace changes

.deploy/artwork-evolution-release/resources/js/components/ui/FormField.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+/**
+ * Nova FormField – thin wrapper that pairs a label with any input-like child,
+ * plus optional hint and error text. Use this for custom controls (NovaSelect,
+ * Toggle, etc.) that don't carry their own label.
+ *
+ * @prop {string}         label    - visible label text
+ * @prop {boolean}        required - shows red asterisk
+ * @prop {string}         error    - validation error message
+ * @prop {string}         hint     - helper text shown below control
+ * @prop {string}         htmlFor  - id of the labelled element
+ */
+export default function FormField({ label, required, error, hint, htmlFor, children, className = '' }) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <label
+          htmlFor={htmlFor}
+          className="text-sm font-medium text-white/85 select-none"
+        >
+          {label}
+          {required && <span className="text-red-400 ml-1">*</span>}
+        </label>
+      )}
+
+      {children}
+
+      {error && (
+        <p role="alert" className="text-xs text-red-400">
+          {error}
+        </p>
+      )}
+
+      {!error && hint && (
+        <p className="text-xs text-slate-500">{hint}</p>
+      )}
+    </div>
+  )
+}