feat: add uuid widget (#719)

packages/core/src/components/common/field/Field.tsx

@@ -22,6 +22,7 @@ export interface FieldProps {
   noHightlight?: boolean;
   disabled: boolean;
   disableClick?: boolean;
+  endAdornment?: ReactNode;
 }
 
 const Field: FC<FieldProps> = ({
@@ -37,6 +38,7 @@ const Field: FC<FieldProps> = ({
   noHightlight = false,
   disabled,
   disableClick = false,
+  endAdornment,
 }) => {
   const finalCursor = useCursor(cursor, disabled);
 
@@ -95,6 +97,8 @@ const Field: FC<FieldProps> = ({
         `
           relative
           flex
+          items-center
+          gap-2
           border-b
           border-slate-400
           focus-within:border-blue-800
@@ -153,6 +157,16 @@ const Field: FC<FieldProps> = ({
         {renderedHint}
         {renderedErrorMessage}
       </div>
+      <div
+        className={classNames(
+          `
+            pr-2
+          `,
+          !noPadding && '-mb-3',
+        )}
+      >
+        {endAdornment}
+      </div>
     </div>
   );
 };

packages/core/src/components/common/text-field/TextField.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import useCursor from '@staticcms/core/lib/hooks/useCursor';
 import classNames from '@staticcms/core/lib/util/classNames.util';
 
-import type { ChangeEventHandler, FC, MouseEventHandler, Ref } from 'react';
+import type { ChangeEventHandler, FC, MouseEventHandler, ReactNode, Ref } from 'react';
 
 export interface BaseTextFieldProps {
   id?: string;
@@ -17,6 +17,8 @@ export interface BaseTextFieldProps {
   variant?: 'borderless' | 'contained';
   inputRef?: Ref<HTMLInputElement>;
   placeholder?: string;
+  endAdornment?: ReactNode;
+  startAdornment?: ReactNode;
 }
 
 export interface NumberTextFieldProps extends BaseTextFieldProps {
@@ -45,6 +47,8 @@ const TextField: FC<TextFieldProps> = ({
   disabled = false,
   onChange,
   onClick,
+  startAdornment,
+  endAdornment,
   ...otherProps
 }) => {
   const finalCursor = useCursor(cursor, disabled);
@@ -58,6 +62,8 @@ const TextField: FC<TextFieldProps> = ({
       data-testid={dataTestId ?? `${type}-input`}
       readOnly={readonly}
       disabled={disabled}
+      startAdornment={startAdornment}
+      endAdornment={endAdornment}
       slotProps={{
         root: {
           className: `